CSS

CSS Background Repeat
تكرار صور الخلفيات في لغة CSS

ستتعلم في هذا الدرس كيفية تكرار صور الخلفيات وإلغاء التكرار أو تكرار صور الخلفيات أفقياً أو رأسياً في لغة CSS.

التاريخ

22 نوفمبر 2021

الدروس

137

المستوى

مبتدئ

اللغة

انجليزي

المشاهدات

1828

المواضيع

24
الشروحات chevron_left CSS Background Repeat chevron_left CSS
CSS Flex Box keyboard_arrow_down

CSS Background Repeat
تكرار صور الخلفيات في لغة CSS

</> CSS Background Repeat
تكرار صور الخلفيات في لغة CSS

إذا كانت صورة الخلفية أصغر من حجم الحاوية أو أصغر من مساحة العنصر فسوف تتكرر صورة الخلفية بشكل تلقائي وهذا التكرار يكون تكرار علي محور x ومحور Y تتكرر أفقياً ورأسياً مع خاصية background-image.

عن طريق خاصية background-repeat يمكن التحكم في تكرار صورة الخلفية أو إلغاء التكرار أو تكرار علي محور x أو محور تكرار أفقي أو تكرار رأسي.


قيم خاصية background-repeat:

  • no-repeat تمنع تكرار الصورة.
  • repeat-x تكرار الصورة أفقي.
  • repeat-y تكرار الصورة رأسي.
Default Value

في الوضع الطبيعي يتم تكرار الخلفية في حال إذا كانت الصورة أصغر من حجم العنصر.

body
{
background-image:url('https://www.closetag.com/images/background.jpg');
}

</> CSS background repeat-x
تكرار صورة الخلفية أفقي في لغة CSS

لعمل تكرار الخلفية أفقي نستخدم خاصية background-repeat مع القيمة repeat-x.

repeat x

تكرار الخلفية أفقياً عن طريق إستخدام القيمة repeat x مع خاصية background-repeat.

body 
{
background-image:url('images/background.jpg');
background-repeat: repeat-x;
}

</> CSS background repeat-y
تكرار صورة الخلفية رأسي في لغة CSS

لعمل تكرار الخلفية رأسي نستخدم خاصية background-repeat مع القيمة repeat-y.
body 
{
background-image:url('images/background.jpg');
background-repeat: repeat-y;
}

</> CSS background no-repeat
إلغاء تكرار صورة الخلفية في لغة CSS

لألغاء تكرار الخلفية أفقي ورأسي نستخدم خاصية background-repeat مع القيمة no-repeat.

no-repeat

إلغاء التكرار بواسطة قمية no-repeat مع خاصية. css background-repeat.

body 
{
background-image:url('images/background.jpg');
background-repeat:no-repeat;
}
مصطلحات الدرس
Repeat
Repeat

تكرار

Background
Background

خلفية

Property
Property

خاصية

Element
Element

عنصر

No-Repeat
No-Repeat

عدم تكرار

Repeat-x
Repeat-x

تكرار أفقي

Repeat-y
Repeat-y

تكرار عامودي

اختصارات الدرس
CSS
CSS

Cascading Style Sheets

صفحات الأنماط الانسيابية
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات