الدرس 18
مكان صورة الخلفية باستخدام background-position
معنى أسماء العناصر والمصطلحات
| المعنى | Stand For | Name |
| مكان صورة الخلفية داخل العنصر | background-position |
حط الصورة في المنتصف
في الكود التالي
وقفنا التكرار علشان نركز على مكان صورة واحدة
القيمة الأولى للمكان الأفقي والتانية للرأسي
يعني هنا الصورة مكانها هيبقى في النص من الناحيتين
.box {
width: 400px;
height: 250px;
background-color: lightgray;
background-image: url("../images/pattern.png");
background-repeat: no-repeat;
background-position: center center;
}
يمين وتحت
هنا الصورة هتروح للركن اليمين تحت
background-position: right bottom;
شمال وفوق
ده المكان الافتراضي لصورة الخلفية فوق خالص على الشمال
background-position: left top;
ملحوظة
بنحتاج نكتب القيمة الإفتراضية علشان لو عاوزين نعدل قيمة قديمة موجودة قبل كدة
مسافة محددة
الحافة الشمال للصورة هتبعد 20 بكسل عن بداية مساحة الخلفية من الشمال
الحافة العليا هتبعد 30 بكسل من فوق
background-position: 20px 30px;
جرب بنفسك
خلي الصورة في منتصف العنصر من فوق باستخدام center top
ثم جرب left center علشان تبقى في الشمال ومنتصف الارتفاع
آخر تعديل للدرس: