Background repeat

background-repeat

Standart tarzda CSSning background-image xususiyati rasmni gorizontal va vertikal tarzda qayta-qayta chiqaradi.

Ba'zi rasmlar faqat gorizontal yoki faqat vertikal tarzda takrorlanishi kerak, aks holda ular g'alati ko'rinadi, masalan:

CSS

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

W3Schools online HTML editor

Yuqoridagi rasm faqat gorizontal tarzda takrorlansa (background-repeat: repeat-x;) fon yaxshiroq ko'rinadi:

CSS

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

W3Schools online HTML editor

Maslahat: Rasmni faqat vertikal taraflama takrormoqchi bo'lsangiz unda repeat-y qiymatidan foydalaning.

CSS background-repeat: no-repeat

Backgrounddagi rasmni faqat o'zini takrorlashlarsiz korsatish uchun background-repeat xususiyatiga no-repeat qiymatini berish kerak:

CSS

Orqafon rasmni bir marta ko'rsatish:

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

W3Schools online HTML editor

Yuqoridagi misolda backgroundning rasmi matn bilan bir joyda joylashtgan. Biz rasmning joylashuvini o'zgartirishimiz kerak, shunda u matnga xalaqt bermaydi.

background-position

background-position xususiyati baclground rasmning joylashuvini belgilash uchun ishlatiladi.

CSS

Orqafon rasmning joylashuvini tepa qismning o'ng tomoniga joylashtirish:

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

W3Schools online HTML editor

CSSning backgound repeat va position xususiyatlari

Xususiyat	Ta'rif
background-position	Background rasmining boshlang'ich joylashuvini o'rnatadi
background-repeat	Background rasm qanday takrorlanishini belgilaydi