CSS: خلفية CSS
آخر تحديث: 2026-10-13
تنسيق الخلفية أداة مهمة لتحسين مظهر صفحات الويب. CSS يوفر مجموعة من خصائص الخلفية التي تتيح لك التحكم في ألوان خلفية العناصر وصور الخلفية وتكرار الصور وحجمها وموضعها.
مرجع سريع لخصائص الخلفية
| الخاصية | القيم الشائعة | الغرض |
|---|---|---|
background-color |
#f5f5f5، red، rgba(255,0,0,0.3) |
لون الخلفية |
background-image |
url("bg.jpg")، linear-gradient(...) |
صورة خلفية أو تدرج |
background-repeat |
no-repeat، repeat، repeat-x، repeat-y |
طريقة تكرار الخلفية |
background-position |
center، top left، 50% 50% |
موضع صورة الخلفية |
background-size |
cover، contain، 100% auto |
حجم صورة الخلفية |
background-attachment |
scroll، fixed، local |
هل الخلفية تتحرك مع الصفحة |
background |
#333 url("bg.jpg") no-repeat center |
اختصار، يجمع عدة خصائص |
1. لون الخلفية
background-color يُعيّن لون خلفية العنصر، يدعم أي قيمة لون صالحة:
▶ مثال
▶ جرّب الكود2. صورة الخلفية
background-image يُعيّن صورة خلفية للعناصر:
▶ مثال
▶ جرّب الكوديمكن تعيين صور خلفية متعددة، مفصولة بفواصل، والأولى في الأعلى:
▶ مثال
▶ جرّب الكود(1) صورة الخلفية مقابل علامة <img>
- صورة الخلفية: مناسبة للصور التزيينية، لا تؤثر على دلالات المحتوى
- علامة
<img>: مناسبة للصور ذات المحتوى الهادف (صور المنتجات، رسوم المقالات)، ودية لـ SEO وإمكانية الوصول
3. تكرار الخلفية
يتحكم في تكرار/تبليط صور الخلفية:
▶ مثال
▶ جرّب الكود4. حجم الخلفية
يتحكم في أبعاد صورة الخلفية:
▶ مثال
▶ جرّب الكودcover: يملأ الحاوية مع الحفاظ على نسبة العرض إلى الارتفاع، يقص الزائد (الأكثر شيوعاً)contain: يُظهر الصورة كاملة مع الحفاظ على نسبة العرض إلى الارتفاع، قد يترك فراغاً
5. موضع الخلفية
يتحكم في موضع صورة الخلفية داخل العنصر:
▶ مثال
▶ جرّب الكود6. اختصار الخلفية
اختصار background يجمع جميع خصائص الخلفية:
▶ مثال
▶ جرّب الكود❓ أسئلة شائعة
س ما الفرق بين
background-size: cover وcontain؟ج
cover يملأ الحاوية بأكملها مع الحفاظ على نسبة العرض إلى الارتفاع، يقص الأجزاء الزائدة. contain يُظهر الصورة كاملة داخل الحاوية، قد يترك فراغاً. استخدم cover للخلفيات التي تمتد لتملأ العرض، وcontain عندما تحتاج لإظهار الصورة بأكملها.س هل يمكن استخدام صور خلفية متعددة؟
ج نعم! افصل الخلفيات المتعددة بفواصل. الأولى تظهر في الأعلى. مثال:
background: url("overlay.png"), url("bg.jpg");. غالباً يُدمج مع التدرجات لتأثيرات التراكب.س ما الفرق بين
background-attachment: fixed وscroll؟ج
fixed يُبقي الخلفية ثابتة عند التمرير (تأثير المنظور)، scroll يتحرك مع الصفحة (افتراضي). fixed يُنشئ إدراكاً للعمق لكن قد يؤثر على أداء الأجهزة المحمولة.📖 ملخص
- خصائص خلفية CSS غنية — يمكنك تعيين ألوان صلبة وصور خلفية والتحكم في التكرار والحجم والموضع وسلوك التمرير
background-size: cover+background-position: centerهو combination الأكثر شيوعاً للخلفيات المتجاوبة- استخدم خلفيات متعددة بفواصل لتأثيرات التراكب
- اختصار الخلفية يجمع جميع الخصائص في إعلان واحد
📝 تمارين
- أنشئ بانر بعرض كامل باستخدام اختصار
backgroundمع صورة مُوَسَّطة بدون تكرار. - أنشئ تأثير منظور باستخدام
background-attachment: fixedمع قسمين على الأقل. - أنشئ تراكب خلفيات متعددة: قناع تدرج + صورة أساسية على نفس العنصر.
