background
Misol
Bitta e’londa turli fon xususiyatlarini o‘rnating:
body {
background: lightblue url("img_tree.gif") no-repeat fixed center;
}
O‘zingiz sinab ko‘ring »
Ta’rif va qo‘llanilishi
background xususiyati quyidagilar uchun qisqartma xususiyatdir:
- background-color
- background-image
- background-position
- background-size
- background-repeat
- background-origin
- background-clip
- background-attachment
Yuqoridagi qiymatlardan biri tushib qolsa ham farqi yo‘q, masalan, background:#ff0000 url(smiley.gif); ga ruxsat beriladi.
| Standart qiymat: | alohida xususiyatlarga qarang |
|---|---|
| Meros qilinadi: | yo‘q |
| Animatsiya qilinadi: | ha, alohida xususiyatlarga qarang. animatable haqida o‘qing Sinab ko‘ring |
| Versiya: | CSS1 + CSS3 dagi yangi xususiyatlar |
| JavaScript sintaksisi: | object.style.background="red url(smiley.gif) top left no-repeat" Sinab ko‘ring |
Brauzerlarda qo‘llab-quvvatlash
Jadvaldagi sonlar xususiyatni to‘liq qo‘llab-quvvatlaydigan birinchi brauzer versiyasini ko‘rsatadi.
| Xususiyat | |||||
|---|---|---|---|---|---|
| background | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
CSS sintaksisi
background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;
Eslatma: Agar qisqartma e’londagi xususiyatlardan biri bg-size bo‘lsa, uni bg-position xususiyatidan ajratish uchun / (slesh) belgisidan foydalanishingiz kerak. Masalan, background:url(smiley.gif) 10px 20px/50px 50px; chapdan 10 piksel, yuqoridan 20 piksel masofada joylashgan, kengligi 50 piksel va balandligi 50 piksel bo‘lgan fon rasmini hosil qiladi.
Eslatma: Agar bir nechta background-image manbalaridan foydalanayotgan bo‘lsangiz va background-color ham kerak bo‘lsa, background-color parametri ro‘yxatda oxirgi bo‘lishi kerak.
Xususiyat qiymatlari
| Qiymat | Tavsif | Demo |
|---|---|---|
| background-color | Ishlatiladigan fon rangini belgilaydi | Demo ❯ |
| background-image | Ishlatiladigan BITTA yoki BIR NECHTA fon rasmini belgilaydi | Demo ❯ |
| background-position | Fon rasmlarining joylashuvini belgilaydi | Demo ❯ |
| background-size | Fon rasmlarining o‘lchamini belgilaydi | Demo ❯ |
| background-repeat | Fon rasmlari qanday takrorlanishini belgilaydi | Demo ❯ |
| background-origin | Fon rasmlarining joylashuv sohasini belgilaydi | Demo ❯ |
| background-clip | Fon rasmlarining chizilish sohasini belgilaydi | Demo ❯ |
| background-attachment | Fon rasmlari qotirilgan bo‘lishini yoki sahifaning qolgan qismi bilan birga aylanishini belgilaydi | |
| initial | Bu xususiyatni standart qiymatiga o‘rnatadi. initial haqida o‘qing | |
| inherit | Bu xususiyatni ota elementidan meros qilib oladi. inherit haqida o‘qing |
Tegishli sahifalar
CSS darsligi: CSS fon, CSS fonlar (kengaytirilgan)
HTML DOM ma’lumotnomasi: background xususiyati
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!