الخاصية background-repeat

الخاصية background-position في CSS تُعرِّف كيف ستتكرر صورة الخلفية؛ إذ يمكن أن تتكرر صورة الخلفية على المحور الأفقي، أو على المحور الرأسي، أو على كلا المحوري، ويمكن ألّا تتكرر أبدًا.

/* تحديد قيمة واحدة */
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: repeat;
background-repeat: space;
background-repeat: round;
background-repeat: no-repeat;

/* horizontal | vertical */
background-repeat: repeat space;
background-repeat: repeat repeat;
background-repeat: round space;
background-repeat: no-repeat round;

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

افتراضيًا، ستُقصّ الصورة إلى أبعاد العنصر، لكن يمكن أن تغيير أبعادها لتتسع داخله (باستخدام القيمة round) أو توزيعها بانتظام بين أطراف العنصر (باستخدام القيمة space).

القيمة الابتدائية	repeat
تُطبَّق على	جميع العناصر.
قابلة للوراثة	لا
قابلة للتحريك	لا
القيمة المحسوبة	قائمة فيها أكثر من عنصر، وكل عنصر يتألف من كلمتين محجوزتين، وكل كلمة محجوزة تمثِّل طريقة التكرار في ذاك الاتجاه.

أمثلة

القاعدة الآتية ستؤدي إلى تكرار صورة الخلفية (المُحدَّدة عبر الخاصية background-image) على المحور الأفقي (x) فقط:

background-repeat: repeat-x;

أما القاعدة الآتية فستؤدي إلى تكرار صورة الخلفية background-image على المحور الرأسي (y) فقط:

background-repeat: repeat-y;

وهذه القاعدة ستؤدي إلى عدم تكرار صورة الخلفية الخلفية background-image، أي أنها ستعرَض مرةً واحدةً فقط:

background-repeat: repeat-y;

المُحدِّد الآتي سيضبط صورة خلفية على العنصر <p> وسيوسِّطها (باستخدام الخاصية background-position) وسيكرِّرها على المحور الرأسي (y) فقط:

p {
  background-image: url(image.png);
  background-position: center;
  background-repeat: repeat-y;
}

أما المُحدِّد الآتي فسيضبط صورتَي خلفية على العنصر <div>، وسيُكرِّر أول صورة على المحور الأفقي (x)، وسيعرض الصورة الثانية دون تكرار:

div {
  background-image: url(image-1.png), url(image-2.png);
  background-repeat: repeat-x, no-repeat;
}

وفي المُحدِّد الآتي ستتكرر الصورة لأي عدد يلزم لتغطية كاملة مساحة الخلفية، وستُقص آخر صورة إن لم تتسع.

div {
  background-image: url(image.png);
  background-repeat: space;
}

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

الميزة	Chrome	Firefox	Internet Explorer	Opera	Safari
الدعم الأساسي	1.0	1.0	4.0	3.5	1.0
تعدد الخلفيات، والقدرة على تحديد قيمتين	1.0	13.0	9.0	10.5	1.3
الكلمتان المحجوزتان round و space	مدعومة	49.0	9.0	10.5	مدعومة

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

القيمة <repeat-style>

إذا استخدمنا قيمةً واحدةً فسنكون قد استعملنا صيغةً مختصرةً بدلًا من تحديد قيمتين:

• القيمة repeat-x تكافئ repeat no-repeat
• القيمة repeat-y تكافئ no-repeat repeat
• القيمة repeat تكافئ repeat repeat
• القيمة space تكافئ space space
• القيمة round تكافئ round round
• القيمة no-repeat تكافئ no-repeat no-repeat

عند تحديد قيمتين، ستُمثِّل أوّل قيمة كيف ستتكرر الصورة على المحور الأفقي وستُمثِّل القيمة الثانية كيف ستتكرر الصورة على المحور الرأسي، وسنشرح كيف ستؤثر كل قيمة من القيم الممكنة على سلوك التكرار في كل اتجاه.

repeat

ستتكرر الصورة لأي عدد يلزم لتغطية كاملة مساحة الخلفية، وستُقص آخر صورة إن لم تتسع.

space

ستتكرر الصورة لأي عدد يلزم لتغطية كاملة مساحة الخلفية دون أن تُقصّ، وستُثبّت أوّل وآخر صورة على جانبي العنصر، وستوزّع الفراغات بالتساوي بين الصور.

سيتم تجاهل الخاصية background-position إلا إذا كان من الممكن عرض صورة واحدة دون قص. والحالة الوحيدة التي ستُقصّ فيها صورة الخلفية عند استخدام القيمة space هي أنَّ مساحة الخلفية التابعة للعنصر لا تتسع لعرض صورة واحدة.

round

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

مثال للتوضيح: لنفترض أنَّ لدينا صورة أبعادها الأصلية 260 بكسل، وهي مكررة 3 مرات، فربما ستزيد أبعادها لتصبح بعرض 300 بكسل لكيلا يُترَك فراغ، وعند إضافة صورة جديدة، فستقل أبعادها لتصبح 225 بكسل كي تتسع صورة جديدة.

no-repeat

لن يتم تكرار الصورة (وليس من الضروري أن تغطي الصورة كامل مساحة الخلفية)، وسيُحدَّد موضع صورة الخلفية (التي لن تتكرر) باستخدام خاصية background-position.

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

background-position: <repeat-style>#;

يمكن تكرار القيمة أكثر من مرة لكي تُمثِّل طريقة تكرار كل صورة من صور الخلفية، وسيُفصَل بينها بفاصلة.

<repeat-style> = repeat-x | repeat-y | [ repeat | space | round | no-repeat ]{1,2}

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

• مواصفة CSS Backgrounds and Borders Module Level 3، أضافت هذه المواصفة دعمًا لتعدد الخلفيات، ولإعطاء قيمتين للتكرار (واحدة على كل محور)، وأضافت الكلمتين المحجوزتين space و round.
• مواصفة ‎CSS Level 2 (Revision 1)‎.
• مواصفة CSS Level 1.