بطبيعة الحال عندما تضيف صورة خلفية للصفحة (في الـ body) فإنها تكرر نفسها حتى تغطي كل المساحة

على سبيل المثال اردنا عمل هذه الصورة خلفية

vفستكون النتيجة هي:

✨هاام
عند اختيارك لصورة ما لتكون خلفية الصفحة احرص على ان تكون مناسبة بحيث لا يضيع النص فيها ولا تحدث تشويش عن رؤية بقية العناصر على الصفحة

للتحكم في تكرار الصورة ستستخدم الخاصية
CSS Background Image Repeat

background-repeat
افتراضيا وعندما لا تغير قيمتها فإن الصورة ستيم تكرارها رأسيا y وافقيا x
وتحمل القيم التالية:
- repeat-x
- repeat-y
- no-repeat
الأولى في حال اردت تكرار الصورة أفقيا
الثانية رأسيا
الثالثة في حال عدم الرغبة في التكرار

بقي لدي مشكلتين:
- اريد ان اتحكم بموقع الصورة أو
- اريد ان تغطي الصورة كامل الصفحة

للتحكم في موقع الصورة لديك الخاصية
background-position
وتحمل القيم
top - right - bottom - left

بقي ان نحدد حجم الصورة: background-size

وهناك طريقتين شائعين:
1- صيغة القيمتين: القيمة الأولى تحدد عرض الصورة، والثانية تحدد ارتفاعها.
مثل: background-size:300px 100px;

2- صيغة الكلمات المفتاحية: مثل "auto"، "cover"، و "contain".
حيث الفوارق بينها هي:

background-size:auto;

background-size:cover;

background-size:contain;

الخاصية الأخيرة لدينا من خواص الخلفية هنا هي
background-attachment

background-attachment تعني حرفيًا:
"كيف يتم إرفاق أو تثبيت الخلفية بالنسبة للمحتوى أو العنصر عند التمرير."

بمعنى: هل الخلفية تتحرك مع التمرير، أو تبقى ثابتة في مكانها، أو تتحرك فقط مع العنصر نفسه؟

بالتالي لها قيمتين:
1- background-attachment: fixed;
2- background-attachment: scroll;

تم تطبيق هذه الخصائص

للوصول إلى هذه النتيجة