Fon rasmini takrorlash

CSS background-repeat

background-repeat xossasi fon rasmining takrorlanishini (va qanday) belgilaydi.

Standart holda fon rasmi vertikal ham, gorizontal ham takrorlanadi.

Ba’zi rasmlar faqat gorizontal yoki vertikal takrorlanishi kerak, aks holda ular mana bunday g‘alati ko‘rinadi:

body {
background-image: url("gradient_bg.png");
}

Agar yuqoridagi rasm faqat gorizontal takrorlansa (background-repeat: repeat-x;), fon yaxshiroq ko‘rinadi:

body {
background-image: url("gradient_bg.png");
background-repeat: repeat-x;
}

Maslahat: Rasmni faqat vertikal takrorlash uchun background-repeat: repeat-y;’dan foydalaning

Fon rasmini faqat bir marta ko‘rsatish ham background-repeat xossasi bilan belgilanadi:

Fon rasmini faqat bir marta ko‘rsatish:

body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
}

Yuqoridagi misolda fon rasmi matn bilan bir xil joyga qo‘yilgan. Rasmining joylashuvini matnga juda bezovta qilmasligi uchun o‘zgartirmoqchimiz.

background-position xossasi fon rasmining boshlang‘ich joylashuvini belgilash uchun ishlatiladi.

Standart holda fon rasmi elementning chap-yuqori burchagiga joylashtiriladi.

Fon rasmini o‘ng-yuqori burchakka joylashtirish:

body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}

Xususiyat	Tavsif
background-position	Fon rasmining boshlang‘ich pozitsiyasini o‘rnatadi
background-repeat	Fon tasviri qanday takrorlanishini belgilaydi

Yutuqlaringizni kuzating – bu bepul!