خاصية صورة الخلفية
آخر تحديث: 2026-09-13
background-image خاصية صورة الخلفية
تحدد الخاصية background-image صورة خلفية واحدة أو أكثر على العنصر، وتدعم مسارات url() ودوال التدرّج. تُفصل الخلفيات المتعددة بفواصل، وتُرصَّع الصور الأقدم فوق البقية. تُستخدم عادةً مع background-size وbackground-position.
| الفئة | |
|---|---|
| القيمة الأولية | none |
| موروث | لا |
| ينطبق على | all |
| نوع الحركة | discrete |
| إصدار CSS | CSS1 |
| الحالة | قياسي |
📝 التركيب
background-image: none | <image> | linear-gradient() | radial-gradient();⚙️ القيم
| القيمة | النوع | الوصف |
|---|---|---|
none | كلمة مفتاحية | لا توجد صورة خلفية |
<image> | النوع | صورة url() أو تدرّج |
linear-gradient() | radial-gradient() | دالة | تدرّج خطي أو شعاعي |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفحات
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| background-image | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
تلميح： يمكنك دمج صورة خلفية مع لون خلفية؛ تُرسم الصورة فوق اللون، ويظهر اللون عبر المناطق الشفافة من الصورة.
تلميح： تعتبر الصور الناتجة من دوال التدرّج (linear-gradient وradial-gradient) صور خلفية أيضاً.
❓ الأسئلة الشائعة
Qكيف أرصّ عدة صور خلفية؟
Aافصل الصور بفواصل، مثل background-image: url(a.png), url(b.png), linear-gradient(...); — الأولى تكون في الأعلى. يمكن التحكم في كل طبقة بشكل مستقل بـ background-size وbackground-position باستخدام قيم مفصولة بفواصل تقابل الطبقات واحدة تلو الأخرى.
Qماذا يحدث عندما تفشل صورة الخلفية في التحميل؟
Aإذا كان قد تم تعيين background-color أيضاً، يظهر اللون كبديل عند فشل الصورة (مسار خاطئ أو محظور أو صيغة غير مدعومة)؛ وإلا يُرسم الخلفية شفافة. ضع في اعتبارك أن background-image لا يحتوي على نص بديل — يجب ألا تحمل صور الخلفية التزيينية البحتة معلومات حرجة. استخدم <img> مع بديل نصي للمحتوى ذي المعنى.
Qما الفرق بين background-image ووسم <img>؟
Aيعد background-image جزءاً من العرض في CSS: ليس في تدفق المستند، ولا يُفهرس بواسطة محركات البحث، ولا يحمل دلالة alt، ويمكن قصه وتموضعه بحرية — وهو مناسب للخلفيات التزيينية. أما <img> فهو محتوى HTML: له نص بديل، ويمكن فهرسته واختياره، ويُقصد به المحتوى ذو المعنى. عند فشل التحميل، يعود <img> إلى نصه البديل، بينما تختفي صورة الخلفية ببساطة.
Qكيف أكتب تدرّجات الخلفية؟
Aالتدرّجات هي صور خلفية. يقوم linear-gradient(135deg, #667eea, #764ba2) بانتقال على زاوية 135 درجة؛ وradial-gradient(circle, #fff, #333) يتمدد للخارج من المركز. رصّ عدة طبقات لؤثرات أكثر تعقيداً، واحتفظ بـ background-color صلب كبديل.
🏷️ خصائص ذات صلة
💡 حالات ذات صلة
📚 دروس ذات صلة
