عرض مصدر CSS/background-image

<noinclude>{{DISPLAYTITLE:الخاصية <code>background-image</code>}}</noinclude>
الخاصية <code>background-image</code> في CSS تضبط صورةً أو أكثر على أنها خلفية للعنصر.

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

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

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

ملاحظة: حتى لو لم تكن هنالك شفافية في الصور المستخدمة، ولن يُعرَض لون الخلفية عادةً، لكن من المستحسن أن يُحدِّد مطورو الويب لون الخلفية باستخدام الخاصية <code>[[CSS/background-color|background-color]]</code>، فلو لم يتمكن المتصفح من تحميل الصورة (مثلًا) فسيستخدم لون الخلفية بديلًا عن الصورة.
{{Course|course=frontend}}
__TOC__
== بطاقة الخاصية ==
{| class="wikitable" style="width: 100%;"
|-
! scope="row" style="width: 20%;" |[[CSS/initial value|القيمة الابتدائية]]
|<code>none</code>
|-
! scope="row" |تُطبَّق على
|جميع العناصر.
|-
! scope="row" |قابلة للوراثة
|لا
|-
!قابلة للتحريك
|لا
|-
! scope="row" |القيمة المحسوبة
|كما حُدِّدَت، لكن مع جعل قيمة رابط <code>[[CSS/url|url]]</code> مطلقةً.
|}<syntaxhighlight lang="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;

</syntaxhighlight>
== أمثلة ==

=== خلفية لكامل الصفحة ===
مثالٌ بسيط عن ضبط صورة خلفية للعنصر <code>[[HTML/body|<body>]]</code> مع تحديد لون لها في حال لم يتمكن المتصفح من عرضها لسببٍ من الأسباب:<syntaxhighlight lang="css">
body {
  background-image: url("bg-image.png");
  background-color: #cccccc;
}
</syntaxhighlight>

=== استخدام تدرج لوني كخلفية ===
مثال عن استخدام تدرج لوني صورةً للخلفية، ويكون التدرج اللوني خطيًّا من اللون الذهبي (<code>gold</code>) إلى اللون الأخضر المصفر (<code>greenyellow</code>). شيفرة [[HTML]]:<syntaxhighlight lang="html">
<p class="gradient-bg">
تهدف موسوعة حسوب لتوفير توثيق عربي كامل وعالي الجودة، مدعّم بالأمثلة لمختلف لغات البرمجة وتقنيات تطوير الويب والجوال. تعتمد الموسوعة على فريق من المحررين والمساهمين المتطوعين أولي الخبرة البرمجية واللغوية، وترحّب بكل من يرغب بالمساهمة فيها. اعرف المزيد عن موسوعة حسوب واطلع على دليل المساهمين.
</p>
</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css">
.gradient-bg {
  background-image: linear-gradient(#205a23, #28832c);
  color: white;
}
</syntaxhighlight>

=== استخدام أكثر من صورة كخلفية ===
شيفرة CSS حددنا فيها أكثر من صورة خلفية للعنصر نفسه:<syntaxhighlight lang="css">
background-image: url(image-1.png), url(image-2.png);
</syntaxhighlight>

==دعم المتصفحات==
{| class="wikitable"
!الميزة
!|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
|}

== البنية العامة ==
يمكن تحديد كل خلفية إما عبر الكلمة المحجوزة <code>none</code> أو عبر نوع البيانات <code>[[CSS/image|<image>]]</code>.
=== <code rel="mw:WikiLink" title="CSS/color value" href="CSS/color value">[[CSS/image|<image>]]</code> ===
تُشير القيمة <code>[[CSS/image|<image>]]</code> إلى الصورة التي ستُعرَض، ويمكن تحديد أكثر من صورة بفصلها بفاصلة <code>,</code>.

=== البنية الرسمية ===
<syntaxhighlight lang="css">
background-image: <bg-image>#;

</syntaxhighlight>حيث:<syntaxhighlight lang="css">
<bg-image> = none | <image>
</syntaxhighlight>
==انظر أيضًا==
*صفحة الخاصيات التي تضبطها الخاصية المختصرة <code>background</code> وهي: <code>[[CSS/background-clip|background-clip]]</code>، و <code>[[CSS/background-color|background-color]]</code>، و <code>[[CSS/background-origin|background-origin]]</code>، و <code>[[CSS/background-position|background-position]]</code>، و <code>[[CSS/background-repeat|background-repeat]]</code>، و <code>[[CSS/background-size|background-size]]</code>، و <code>[[CSS/background-attachment|background-attachment]]</code>.
*صفحة الخاصية <code>[[CSS/color|color]]</code> لضبط لون العنصر.
*التدرجات اللونية [[CSS/gradient|<gradient>]].
*صفحة العنصر <code>[[HTML/img|<img>]]</code> الذي يستخدم لإضافة الصور.
== مصادر ومواصفات ==
* مواصفة [https://drafts.csswg.org/css-backgrounds-3/#background-image CSS Backgrounds and Borders Module Level 3]، أضافت هذه المواصفة القدرة على تحديد أكثر من قيمة <code>[[CSS/image|<image>]]</code> لهذه الخاصية.
* مواصفة ‎[http://www.w3.org/TR/CSS2/colors.html#propdef-background-image CSS Level 2 (Revision 1)‎].
* مواصفة [http://www.w3.org/TR/CSS1/#background-image CSS Level 1]. 
[[تصنيف:CSS|{{SUBPAGENAME}}]]
[[تصنيف:CSS Property|{{SUBPAGENAME}}]]
[[تصنيف:CSS Background|{{SUBPAGENAME}}]]