الدرس 17

تكرار صورة الخلفية باستخدام background-repeat

المعنى	Stand For	Name
التحكم في تكرار صورة الخلفية		background-repeat

القيمة الإفتراضية للخاصية هي repeat

القيمة repeat بتكرر الصورة أفقيا ورأسيا لحد ما تغطي مساحة العنصر

ومعنى الإفتراضية يعني لو مكتبتهاش هتعتبر دي القيمة المختارة

.box {
  width: 400px;
  height: 250px;
  background-image: url("../images/pattern.png");
  background-repeat: repeat;
}

طيب لو عاوزين الصورة بدون تكرار ؟ نستخدم القيمة no-repeat

ولاحظ في المثال لون الخلفية بان دلوقتي تحت الصورة علشان التكرار موصلش انه يملأ العنصر كاملا

background-repeat: no-repeat;

لو عاوز التكرار يكون أفقي فقط

background-repeat: repeat-x;

لو عاوز التكرار يكون رأسي فقط

background-repeat: repeat-y;

بدل القيم الأربع داخل نفس المثال واحدة واحدة

واحفظ وحدث الصفحة بعد كل تغيير

علشان تشوف اتجاه التكرار بوضوح

آخر تعديل للدرس: 12/10/2026