مساعدة في تنسيق صورة على كامل الصفحة

مرحباً عبدالواحد : 
إذا كنت تقصد صورة لوحة المفاتيح فالصورة هي خلفية العنصر <div class="testimonials"> لكن هذا العنصر موجود بداخل عنصر اسمه <div class="container"> والذي هو بطبيعة الحال لا يأخذ المساحة الكلية من الشاشة فبالتالى الصورة لن تخرج خارج الحاوية 
 

•  الحل: هو أن تقوم بإخراج <div class="testimonials"> خارج العنصر row  وباقي العناصر تكون بداخل <div class="container">
  

مرحبًا عبد الواحد.

أحسنت العمل أرجو أن تستمر بهذا الأداء دائمًا فهذا سيجعل منك مطورًا ماهر للغاية.

السبب في هذا أن هذه الحاوية "التي قمت بإضافة صورة الخلفية لها" موجودة داخل حاوية div لها صنف التنسيقات container تمامًا مثل الأقسام السابقة لها. فهذا الصنف يجعل العناصر تظهر في منتصف الصفحه بهذا الشكل.

يمكنك أن تقوم بإخراجها منه و بعدها إعطاء الحاوية "التي قمت بإضافة صورة الخلفية لها" التنسيقات التالية:

div { 
  width: 100vw; /*كامل عرض الشاشة*/
}

أو يمكنك تركها في مكانها داخل الحاوية container و إعطائها التنسيق  التالي:

div {
  margin-right:0!importaint; 
  /*bootstrap يعني أننا نريد إلغاء تنسيقات bootstrap  لأننا نقوم بتعديل التنسيقات المستخدمة في important  نستخدم */
  margin-left:0!importaint;
  width: 100vw!importaint;
  
}

 بالتوفيق.

الفكرة أنك تجعل <div class="testimonials"> يتجاوز ال width الخاص ب الparent  االذي هو  <div class="container"> سوف تحتاج لتعديل  على ملف  style.css   عند ال testimonials Selector  ثم تقوم بإضافة  هذه الجزئيات للكود الخاص بك:

;width: 100vw

;position: relative

;left: 50%

;right: 50%

;margin-left: -50vw

;margin-right: -50vw

نضع الposition relative حتى أستطيع تحريك الdiv خارج حدود الparent)container) ثم أقوم بإظهار الdiv  في المنتصف  فقمت بوضع قيم ل اليمين واليسار 50 % بحيث يصبح في المنتصف , ثم قمت بعمل هامش ل اليمين واليسار بقيمة 50vw- 

مرفق المشروع  معدل src.rar

بالتوفيق لك ..