CSS Fon(background-repeat)

CSS Fon Tasvirini Takrorlash

CSS background-repeat

Odatiy bo'lib, background-image xususiyati rasmni gorizontal va vertikal ravishda takrorlaydi.

Ba'zi tasvirlar faqat gorizontal yoki vertikal ravishda takrorlanishi kerak, aks holda ular g'alati ko'rinishi mumkin, quyidagi misoldagi kabi:

Misol

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

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

Misol

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

CSS background-repeat: no-repeat

Fon tasvirini faqat bir marta ko'rsatish ham background-repeat xususiyati bilan belgilanadi:

Misol Fon tasvirini faqat bir marta ko'rsating:

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

Yuqoridagi misolda, fon tasviri matn bilan bir joyga joylashtirilgan. Biz tasvirni joylashishini o'zgartirmoqchimiz, shunda u matnga ko'p halaqit bermaydi.

CSS background-position

background-position xususiyati fon tasvirining joylashuvini belgilash uchun ishlatiladi.

Misol Fon tasvirini yuqori o'ng burchakka joylashtiring:

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

CSS background-repeat va background-position Xususiyatlari