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

<noinclude>{{DISPLAYTITLE:الخاصية <code>background-repeat</code>}}</noinclude>
الخاصية <code>background-position</code> في CSS تُعرِّف كيف ستتكرر صورة الخلفية؛ إذ يمكن أن تتكرر صورة الخلفية على المحور الأفقي، أو على المحور الرأسي، أو على كلا المحوري، ويمكن ألّا تتكرر أبدًا.<syntaxhighlight lang="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;
</syntaxhighlight>افتراضيًا، ستُقصّ الصورة إلى أبعاد العنصر، لكن يمكن أن تغيير أبعادها لتتسع داخله (باستخدام القيمة <code>round</code>) أو توزيعها بانتظام بين أطراف العنصر (باستخدام القيمة <code>space</code>).
{| class="wikitable" style="width: 100%;"
|-
! scope="row" style="width: 20%;" |[[CSS/initial value|القيمة الابتدائية]]
|<code>repeat</code>
|-
! scope="row" |تُطبَّق على
|جميع العناصر.
|-
! scope="row" |قابلة للوراثة
|لا
|-
!قابلة للتحريك
|لا
|-
! scope="row" |القيمة المحسوبة
|قائمة فيها أكثر من عنصر، وكل عنصر يتألف من كلمتين محجوزتين، وكل كلمة محجوزة تمثِّل طريقة التكرار في ذاك الاتجاه.
|}

== أمثلة ==
القاعدة الآتية ستؤدي إلى تكرار صورة الخلفية (المُحدَّدة عبر الخاصية <code>[[CSS/background-image|background-image]]</code>) على المحور الأفقي (x) فقط: <syntaxhighlight lang="css">
background-repeat: repeat-x;
</syntaxhighlight>أما القاعدة الآتية فستؤدي إلى تكرار صورة الخلفية <code>[[CSS/background-image|background-image]]</code> على المحور الرأسي (y) فقط: <syntaxhighlight lang="css">
background-repeat: repeat-y;
</syntaxhighlight>وهذه القاعدة ستؤدي إلى عدم تكرار صورة الخلفية الخلفية <code>[[CSS/background-image|background-image]]</code>، أي أنها ستعرَض مرةً واحدةً فقط: <syntaxhighlight lang="css">
background-repeat: repeat-y;
</syntaxhighlight>المُحدِّد الآتي سيضبط صورة خلفية على العنصر <code>[[HTML/p|<nowiki><p></nowiki>]]</code> وسيوسِّطها (باستخدام الخاصية <code>[[CSS/background-position|background-position]]</code>) وسيكرِّرها على المحور الرأسي (y) فقط: <syntaxhighlight lang="css">
p {
  background-image: url(image.png);
  background-position: center;
  background-repeat: repeat-y;
}
</syntaxhighlight>أما المُحدِّد الآتي فسيضبط صورتَي خلفية على العنصر <code>[[HTML/div|<nowiki><div></nowiki>]]</code>، وسيُكرِّر أول صورة على المحور الأفقي (x)، وسيعرض الصورة الثانية دون تكرار:  <syntaxhighlight lang="css">
div {
  background-image: url(image-1.png), url(image-2.png);
  background-repeat: repeat-x, no-repeat;
}
</syntaxhighlight>وفي المُحدِّد الآتي ستتكرر الصورة لأي عدد يلزم لتغطية كاملة مساحة الخلفية، وستُقص آخر صورة إن لم تتسع.<syntaxhighlight lang="css">
div {
  background-image: url(image.png);
  background-repeat: space;
}
</syntaxhighlight>

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

== البنية العامة ==
=== القيمة <code rel="mw:WikiLink" title="CSS/color value" href="CSS/color value"><repeat-style></code> ===
إذا استخدمنا قيمةً واحدةً فسنكون قد استعملنا صيغةً مختصرةً بدلًا من تحديد قيمتين:
* القيمة <code>repeat-x</code> تكافئ <code>repeat no-repeat</code>
* القيمة <code>repeat-y</code> تكافئ <code>no-repeat repeat</code>
* القيمة <code>repeat</code> تكافئ <code>repeat repeat</code>
* القيمة <code>space</code> تكافئ <code>space space</code>
* القيمة <code>round</code> تكافئ <code>round round</code>
* القيمة <code>no-repeat</code> تكافئ <code>no-repeat no-repeat</code>
عند تحديد قيمتين، ستُمثِّل أوّل قيمة كيف ستتكرر الصورة على المحور الأفقي وستُمثِّل القيمة الثانية كيف ستتكرر الصورة على المحور الرأسي، وسنشرح كيف ستؤثر كل قيمة من القيم الممكنة على سلوك التكرار في كل اتجاه.

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

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

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

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

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

==== <code>no-repeat</code> ====
لن يتم تكرار الصورة (وليس من الضروري أن تغطي الصورة كامل مساحة الخلفية)، وسيُحدَّد موضع صورة الخلفية (التي لن تتكرر) باستخدام خاصية <code>[[CSS/background-position|background-position]]</code>.

=== البنية الرسمية ===
<syntaxhighlight lang="css">
background-position: <repeat-style>#;
</syntaxhighlight>يمكن تكرار القيمة أكثر من مرة لكي تُمثِّل طريقة تكرار كل صورة من صور الخلفية، وسيُفصَل بينها بفاصلة.<syntaxhighlight lang="css">
<repeat-style> = repeat-x | repeat-y | [ repeat | space | round | no-repeat ]{1,2}

</syntaxhighlight>

== مصادر ومواصفات ==
* مواصفة [https://drafts.csswg.org/css-backgrounds-3/#the-background-repeat CSS Backgrounds and Borders Module Level 3]، أضافت هذه المواصفة دعمًا لتعدد الخلفيات، ولإعطاء قيمتين للتكرار (واحدة على كل محور)، وأضافت الكلمتين المحجوزتين <code>space</code> و <code>round</code>.
* مواصفة ‎[http://www.w3.org/TR/CSS2/colors.html#propdef-background-repeat CSS Level 2 (Revision 1)‎].
* مواصفة [http://www.w3.org/TR/CSS1/#background-repeat CSS Level 1]. 
[[تصنيف:CSS|{{SUBPAGENAME}}]]
[[تصنيف:CSS Property|{{SUBPAGENAME}}]]
[[تصنيف:CSS Background|{{SUBPAGENAME}}]]