CSS Background Repeat
تكرار صور الخلفيات في لغة CSS
ستتعلم في هذا الدرس كيفية تكرار صور الخلفيات وإلغاء التكرار أو تكرار صور الخلفيات أفقياً أو رأسياً في لغة CSS.
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
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
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;
}
تكرار
خلفية
خاصية
عنصر
عدم تكرار
تكرار أفقي
تكرار عامودي
Cascading Style Sheets
صفحات الأنماط الانسيابية
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم البرمجة. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال البرمجة. مهمتنا ليست فقط تعليم البرمجة، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
