CSS/background

الخاصية background المختصرة في CSS تسمح لنا بتعديل خيارات تنسيق الخلفية كلها دفعةً واحدةً، بما في ذلك اللون أو الصورة، والمبدأ والحجم، وطريقة التكرار، وغير ذلك من الميزات.

يمكن استخدام الخاصية background لضبط قيم خاصية أو أكثر من الخاصيات الآتية: background-clip، و background-color، و background-image، و background-origin، و background-position، و background-repeat، و background-size، و background-attachment.

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

القيمة الابتدائية	ستُضبَط قيم الخاصيات غير المختصرة إلى قيمها الابتدائية: background-image: none background-position: 0% 0% background-size: auto auto background-repeat: repeat background-origin: padding-box background-clip: border-box background-attachment: scroll background-color: transparent
تُطبَّق على	جميع العناصر.
قابلة للوراثة	لا
قابلة للحركة	نعم
القيمة المحسوبة	كل قيمة من قيم الخاصيات المختصرة: background-image: كما حُدِّدَت، لكن مع جعل قيمة رابط url مطلقةً. background-position: المبدأ والبعد عنه. background-size: كما حُدِّدَت لكن مع تحويل الأطوال النسبية إلى مطلقة. background-repeat: كلمتين محجوزتين. background-origin: كما حُدِّدَت. background-clip: كما حُدِّدَت. background-attachment: كما حُدِّدَت. background-color: القيمة اللونية المحسوبة.

/* <background-color> */
background: green;

/* <bg-image> <repeat-style> */
background: url("image.png") repeat-y;

/* <box> <background-color> */
background: border-box red;

/* صورة واحدة تم توسطيها وتغيير أبعادها */
background: no-repeat center/80% url("image.png");

ستضبط الخاصية المختصرة background القيم المعطية لها وستعيد ضبط الخاصيات التي لم نُحدِّد لها قيمة إلى قيمتها الابتدائية.

أمثلة

سنستعرض في هذا القسم أمثلةً عن الخاصية background المختصرة، وما يكافئها من الخاصيات المفردة.

هذه القاعدة ستجعل لون الخلفية أحمر:

background: red;

القاعدة السابقة تكافئ ما يلي من القواعد، لاحظ أنَّ جميع الخاصيات قد ضُبِطَت إلى قيمها الابتدائية ما عدا الخاصية background-color:

background-color:      red;
background-position:   0% 0%;
background-size:       auto;
background-repeat:     repeat;
background-clip:       border-box;
background-origin:     padding-box;
background-attachment: scroll;
background-image:      none;

أما هذه القاعدة، فهي تضبط صورة الخلفية (background-image)، وتُحدِّد موضعها (background-position) ثم تضبط قياسها عبر تحديد قيمة الخاصية background-size بفصلها عن قيمة الخاصية background-position بخطٍ مائل /؛ لاحظ أنَّ تكرار صورة الخلفية (background-repeat) سيكون مضبوطًا عبر الكلمة المحجوزة round، وموضع الصورة (background-attachment) سيكون ثابتًا fixed، وستُضبَط قيمة الخاصيتين background-origin و background-clip معًا باستخدامنا للكلمة المحجوزة border-box:

background: url(image.png) 40% / 10em gray round fixed border-box;

القاعدة السابقة تكافئ ما يلي من القواعد:

background-color:      gray;
background-position:   40% 50%;
background-size:       10em;
background-repeat:     round;
background-clip:       border-box;
background-origin:     border-box;
background-attachment: fixed;
background-image:      url(image.png);

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

الميزة	Chrome	Firefox	Internet Explorer	Opera	Safari
الدعم الرئيسي	1.0	1.0	4	3.5	1.0
صور SVG كخلفية	31.0	9.0	9.0	21.0	5.1
قيم الخاصيات background-size و background-origin و background-clip	21.0	22.0	9.0	21.0	5.1

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

تُحدِّد الخاصية background طبقةً أو أكثر من طبقات الخلفية، ويُفصَل بين الطبقات بفاصلة، وتكون بنية كل طبقة كما يلي:

• قد تحتوي كل طبقة على مرة واحدة على الأكثر من القيم الآتية:
  • <attachment>
  • <bg-image>
  • <position>
  • <bg-size>
  • <repeat-style>
• قد تكون قيمة <bg-size> مذكورةً مباشرةً بعد قيمة <position> ويفصل بينهما المحرف /، كما في center/80%.
• يمكن تضمين القيمة <box> صفر مرة أو مرة واحدة أو مرتين؛ وإذا وضعناها مرةً فستضبط قيمة الخاصيتين background-origin و background-clip، وإن وضعناها مرتين فأول مرة ستضبط قيمة الخاصية background-origin والمرة الثانية ستضبط قيمة الخاصية background-clip.
• لا يمكن تضمين القيمة <background-color> إلا في آخر طبقة.

<attachment>

راجع صفحة الخاصية background-attachment.

<box>

راجع صفحة الخاصية background-clip والخاصية background-origin.

<background-color>

راجع صفحة الخاصية background-color.

<bg-image>

راجع صفحة الخاصية background-image.

<position>

راجع صفحة الخاصية background-position.

<repeat-style>

راجع صفحة الخاصية background-repeat.

<bg-size>

راجع صفحة الخاصية background-size.

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

background : [ <bg-layer> , ]* <final-bg-layer>;

حيث:

<bg-layer> = <bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box>{1,2}
<final-bg-layer> = <bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box> || <'background-color'>

انظر أيضًا

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

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

• مواصفة CSS Backgrounds and Borders Module Level 3، أضافت هذه المواصفة القدرة على تضمين عدِّة خلفيات، وأضافت الخاصيات background-size و background-origin و background-clip الجديدة.
• مواصفة ‎CSS Level 2 (Revision 1)‎.
• مواصفة CSS Level 1.