background-repeat
Misol
background-image’ni faqat vertikal takrorlang:
body {
background-image: url("paper.gif");
background-repeat: repeat-y;
}
O‘zingiz sinab ko‘ring »
Quyida ko‘proq "O‘zingiz sinab ko‘ring" misollari keltirilgan.
Ta’rif va qo‘llanilishi
background-repeat xususiyati fon rasmi takrorlanadimi va qanday takrorlanishini o‘rnatadi.
Standart holatda background-image vertikal hamda gorizontal yo‘nalishda takrorlanadi.
Maslahat: Fon rasmi background-position xususiyatiga muvofiq joylashtiriladi. Agar background-position ko‘rsatilmagan bo‘lsa, rasm har doim elementning yuqori chap burchagiga joylashtiriladi.
| Standart qiymat: | repeat |
|---|---|
| Meros qilinadi: | yo‘q |
| Animatsiya qilinadi: | yo‘q. animatable haqida o‘qing |
| Versiya: | CSS1 |
| JavaScript sintaksisi: | object.style.backgroundRepeat="repeat-x" Sinab ko‘ring |
Brauzerlarda qo‘llab-quvvatlash
Jadvaldagi sonlar xususiyatni to‘liq qo‘llab-quvvatlaydigan birinchi brauzer versiyasini ko‘rsatadi.
| Xususiyat | |||||
|---|---|---|---|---|---|
| background-repeat | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
CSS sintaksisi
background-repeat: repeat|repeat-x|repeat-y|no-repeat|initial|inherit;
Xususiyat qiymatlari
| Qiymat | Tavsif | Demo |
|---|---|---|
| repeat | Fon rasmi vertikal hamda gorizontal yo‘nalishda takrorlanadi. Oxirgi rasm sig‘masa, kesib qo‘yiladi. Bu standart qiymat | Demo ❯ |
| repeat-x | Fon rasmi faqat gorizontal takrorlanadi | Demo ❯ |
| repeat-y | Fon rasmi faqat vertikal takrorlanadi | Demo ❯ |
| no-repeat | background-image takrorlanmaydi. Rasm faqat bir marta ko‘rsatiladi | Demo ❯ |
| space | background-image kesilmasdan imkon qadar ko‘p takrorlanadi. Birinchi va oxirgi rasm elementning ikki chetiga mahkamlanadi, bo‘sh joy esa rasmlar orasida teng taqsimlanadi | Demo ❯ |
| round | background-image takrorlanadi va bo‘sh joyni to‘ldirish uchun siqiladi yoki cho‘ziladi (bo‘shliqlarsiz) | Demo ❯ |
| initial | Bu xususiyatni standart qiymatiga o‘rnatadi. initial haqida o‘qing | |
| inherit | Bu xususiyatni ota elementidan meros qilib oladi. inherit haqida o‘qing |
Ko‘proq misollar
Misol
Fon rasmini vertikal hamda gorizontal takrorlang (bu standart holat):
body {
background-image: url("paper.gif");
background-repeat: repeat;
}
O‘zingiz sinab ko‘ring »
Misol
Fon rasmini faqat gorizontal takrorlang:
body {
background-image: url("paper.gif");
background-repeat: repeat-x;
}
O‘zingiz sinab ko‘ring »
Misol
Fon rasmini takrorlamang. Rasm faqat bir marta ko‘rsatiladi:
body {
background-image: url("paper.gif");
background-repeat: no-repeat;
}
O‘zingiz sinab ko‘ring »
Misol
background-repeat: space va background-repeat: round dan foydalanish:
#example2 {
border: 2px solid black;
padding: 25px;
background: url("w3css.gif");
background-repeat: space;
}
#example3 {
border: 1px solid black;
padding: 25px;
background: url("w3css.gif");
background-repeat: round;
}
O‘zingiz sinab ko‘ring »
Misol
"Hero" rasm yaratish uchun turli fon xususiyatlaridan foydalaning:
.hero-image {
background-image: url("photographer.jpg"); /* The image used */
background-color: #cccccc; /* Used if the image is unavailable */
height: 500px; /* You must set a specified height */
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: cover; /* Resize the background image to cover the entire container */
}
O‘zingiz sinab ko‘ring »
Tegishli sahifalar
CSS darsligi: CSS fon
CSS ma’lumotnomasi: background-position xususiyati
HTML DOM ma’lumotnomasi: backgroundRepeat xususiyati
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!