الخاصية `background-image`

الخاصية background-image في CSS تضبط صورةً أو أكثر على أنها خلفية للعنصر.

ستُطبَّق صور الخلفية فوق بعضها بعضًا، وترسم أوّل طبقة مُحدَّدة وكأنها أقرب طبقة إلى المستخدم.

سيُرسَم إطار العنصر border فوق صور الخلفية، وسيوضع اللون المُحدَّد في الخاصية background-color تحتها. تُحدَّد العلاقة بين الصور المعروضة وصندوق العنصر وإطاره باستخدام الخاصيتين background-clip و background-origin في CSS.

إذا لم يمكن ممكنًا عرض الصورة المُحدَّد (على سبيل المثال: لم يتمكن المتصفح من تحميل الصورة من رابط URI الخاص بها)، فسيفترض المتصفح أنَّ القيمة هي none.

ملاحظة: حتى لو لم تكن هنالك شفافية في الصور المستخدمة، ولن يُعرَض لون الخلفية عادةً، لكن من المستحسن أن يُحدِّد مطورو الويب لون الخلفية باستخدام الخاصية background-color، فلو لم يتمكن المتصفح من تحميل الصورة (مثلًا) فسيستخدم لون الخلفية بديلًا عن الصورة.

دورة تطوير واجهات المستخدم

72 ساعة فيديو تدريبية
من الصفر دون الحاجة لخبرة مسبقة
شهادة معتمدة من أكاديمية حسوب
متابعة أثناء الدورة من فريق مختص

اشترك الآن

بطاقة الخاصية

القيمة الابتدائية	`none`
تُطبَّق على	جميع العناصر.
قابلة للوراثة	لا
قابلة للتحريك	لا
القيمة المحسوبة	كما حُدِّدَت، لكن مع جعل قيمة رابط `url` مطلقةً.

/* قيمة واحدة */
background-image: url('bg-image.png');

/* عدِّة قيم */
background-image: url('bg-image-1.png'), url('bg-image-2.png');

/* كلمة محجوزة */
background-image: none;

/* قيم عامة */ 
background-image: inherit;
background-image: initial;
background-image: unset;

أمثلة

خلفية لكامل الصفحة

مثالٌ بسيط عن ضبط صورة خلفية للعنصر <body> مع تحديد لون لها في حال لم يتمكن المتصفح من عرضها لسببٍ من الأسباب:

body {
  background-image: url("bg-image.png");
  background-color: #cccccc;
}

استخدام تدرج لوني كخلفية

مثال عن استخدام تدرج لوني صورةً للخلفية، ويكون التدرج اللوني خطيًّا من اللون الذهبي (gold) إلى اللون الأخضر المصفر (greenyellow). شيفرة HTML:

<p class="gradient-bg">
تهدف موسوعة حسوب لتوفير توثيق عربي كامل وعالي الجودة، مدعّم بالأمثلة لمختلف لغات البرمجة وتقنيات تطوير الويب والجوال. تعتمد الموسوعة على فريق من المحررين والمساهمين المتطوعين أولي الخبرة البرمجية واللغوية، وترحّب بكل من يرغب بالمساهمة فيها. اعرف المزيد عن موسوعة حسوب واطلع على دليل المساهمين.
</p>

شيفرة CSS:

.gradient-bg {
  background-image: linear-gradient(#205a23, #28832c);
  color: white;
}

استخدام أكثر من صورة كخلفية

شيفرة CSS حددنا فيها أكثر من صورة خلفية للعنصر نفسه:

background-image: url(image-1.png), url(image-2.png);

دعم المتصفحات

الميزة	Chrome	Firefox	Internet Explorer	Opera	Safari
الدعم الأساسي	1.0	1.0	4.0	3.5	1.0
صور SVG	8.0	4.0	9.0	9.5	5.0

البنية العامة

يمكن تحديد كل خلفية إما عبر الكلمة المحجوزة none أو عبر نوع البيانات <image>.

`<image>`

تُشير القيمة <image> إلى الصورة التي ستُعرَض، ويمكن تحديد أكثر من صورة بفصلها بفاصلة ,.

البنية الرسمية

background-image: <bg-image>#;

حيث:

<bg-image> = none | <image>

انظر أيضًا

صفحة الخاصيات التي تضبطها الخاصية المختصرة background وهي: background-clip، و background-color، و background-origin، و background-position، و background-repeat، و background-size، و background-attachment.
صفحة الخاصية color لضبط لون العنصر.
التدرجات اللونية <gradient>.
صفحة العنصر <img> الذي يستخدم لإضافة الصور.

مصادر ومواصفات

مواصفة CSS Backgrounds and Borders Module Level 3، أضافت هذه المواصفة القدرة على تحديد أكثر من قيمة <image> لهذه الخاصية.
مواصفة ‎CSS Level 2 (Revision 1)‎.
مواصفة CSS Level 1.