الخاصية background-image
الخاصية background-image في CSS تضبط صورةً أو أكثر على أنها خلفية للعنصر.
/* قيمة واحدة */
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;
ستُطبَّق صور الخلفية فوق بعضها بعضًا، وترسم أوّل طبقة مُحدَّدة وكأنها أقرب طبقة إلى المستخدم.
سيُرسَم إطار العنصر border فوق صور الخلفية، وسيوضع اللون المُحدَّد في الخاصية background-color تحتها. تُحدَّد العلاقة بين الصور المعروضة وصندوق العنصر وإطاره باستخدام الخاصيتين background-clip و background-origin في CSS.
إذا لم يمكن ممكنًا عرض الصورة المُحدَّد (على سبيل المثال: لم يتمكن المتصفح من تحميل الصورة من رابط URI الخاص بها)، فسيفترض المتصفح أنَّ القيمة هي none.
ملاحظة: حتى لو لم تكن هنالك شفافية في الصور المستخدمة، ولن يُعرَض لون الخلفية عادةً، لكن من المستحسن أن يُحدِّد مطورو الويب لون الخلفية باستخدام الخاصية background-color، فلو لم يتمكن المتصفح من تحميل الصورة (مثلًا) فسيستخدم لون الخلفية بديلًا عن الصورة.
| القيمة الابتدائية | none
|
|---|---|
| تُطبَّق على | جميع العناصر. |
| قابلة للوراثة | لا |
| قابلة للتحريك | لا |
| القيمة المحسوبة | كما حُدِّدَت، لكن مع جعل قيمة رابط url مطلقةً.
|
أمثلة
مثالٌ بسيط عن ضبط صورة خلفية للعنصر <body> مع تحديد لون لها في حال لم يتمكن المتصفح من عرضها لسببٍ من الأسباب:
body {
background-image: url("bg-image.png");
background-color: #cccccc;
}
مثال عن استخدام تدرج لوني صورةً للخلفية، ويكون التدرج اللوني خطيًّا من اللون الذهبي (gold) إلى اللون الأخضر المصفر (greenyellow). شيفرة HTML:
<div class="gradient-bg">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
شيفرة CSS:
.gradient-bg {
background-image: linear-gradient(gold, greenyellow);
}
شيفرة 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>
مصادر ومواصفات
- مواصفة CSS Backgrounds and Borders Module Level 3، أضافت هذه المواصفة القدرة على تحديد أكثر من قيمة
<image>لهذه الخاصية. - مواصفة CSS Level 2 (Revision 1).
- مواصفة CSS Level 1.