مقاسات الصورة الخلفية في css

جرب وضع الصورة كعنصر img يحتل عرضا كاملا من الشاشة خلف باقي العناصر بدل وصفها كخلفية لعنصر home.

فيكون:

<div class="home">
  <img src="path/to/image" class="bg-img" />

ثم لنعطها التنسيقات التالية:

.home{
   position: relative;
}
.bg-img{
   postion: absolute;
   top:0;
   right:0;
   width: 100%;
}

قد يحل هذا مشكلتك، وفي حالة عدم اشتغال القواعد بصورة صحيحة حاول التحكم في z-index الخاصة بالصورة لتظهر خلف العناصر.

طبعا لا تنسى التخلص من الشيفرات الخاصة بالخلفية لكي يتم ذلك بصورة صحيحة.

ربما المشكلة لديك هي أنك قمت بوضع قيمة ثابتة لعرض الصورة في الشاشات الصغيرة، حيث حددت 8rem، حاول تغيير تلك القيمة لتصبح كالتالي:

max-width: 100%

وإذا لم يتم حل المشكلة من الأفضل ضغط مجلد المشروع وإرفاقه هنا لتفقد أين المشكلة.