background
Misol
Hujjat foniga uslub bering:
document.body.style.background = "#f3f3f3 url('img_tree.png') no-repeat right top";
O‘zingiz sinab ko‘ring »
Quyida ko‘proq "O‘zingiz sinab ko‘ring" misollari keltirilgan.
Tavsif
background xususiyati sakkiztagacha alohida fon xususiyatini qisqartma (shorthand) shaklda o‘rnatadi yoki qaytaradi.
Bu xususiyat yordamida quyidagilardan birini yoki bir nechtasini (istalgan tartibda) o‘rnatishingiz/qaytarishingiz mumkin:
| DOM xususiyati | CSS xususiyati |
|---|---|
| backgroundAttachment | background-attachment |
| backgroundClip | background-clip |
| backgroundColor | background-color |
| backgroundImage | background-image |
| backgroundOrigin | background-origin |
| backgroundPosition | background-position |
| backgroundRepeat | background-repeat |
| backgroundSize | background-size |
Yuqoridagi xususiyatlarni alohida style xususiyatlari orqali ham o‘rnatish mumkin. Yaxshiroq boshqarish uchun unchalik tajribali bo‘lmagan mualliflarga alohida xususiyatlardan foydalanish qat’iy tavsiya etiladi.
Shuningdek qarang:
HTML uslublar: background xususiyati
CSS darsligi: CSS fonlar
CSS3 darsligi: CSS3 fonlar
CSS ma’lumotnomasi: background xususiyati
Sintaksis
background xususiyatini qaytarish:
object.style.background
background xususiyatini o‘rnatish:
object.style.background = "color image repeat attachment position size origin clip|initial|inherit"
Xususiyat qiymatlari
| Qiymat | Tavsif |
|---|---|
| attachment | Fon rasmi qotirilgan bo‘lishi yoki aylanishini o‘rnatadi |
| clip | Fon rasmining bo‘yaladigan sohasini o‘rnatadi |
| color | Elementning fon rangini o‘rnatadi |
| image | Element uchun fon rasmini o‘rnatadi |
| origin | Fonning joylashish sohasini o‘rnatadi |
| position | Fon rasmining boshlang‘ich joylashuvini o‘rnatadi |
| repeat | Fon rasmi qanday takrorlanishini o‘rnatadi |
| size | Fon rasmining o‘lchamini o‘rnatadi |
| initial | Bu xususiyatni standart qiymatiga o‘rnatadi. initial haqida o‘qing |
| inherit | Bu xususiyatni ota elementidan meros qilib oladi. inherit haqida o‘qing |
Texnik tafsilotlar
| Standart qiymat: | transparent none repeat scroll 0% 0% auto padding-box border-box |
|---|---|
| Qaytariladigan qiymat: | Elementning fonini ifodalovchi String |
| CSS versiyasi | CSS1 |
Brauzerlarda qo‘llab-quvvatlash
background — CSS1 (1996) imkoniyati.
U barcha brauzerlarda to‘liq qo‘llab-quvvatlanadi:
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Ha | Ha | Ha | Ha | Ha | Ha |
Eslatma
CSS3 (1999) da 3 ta yangi xususiyat qo‘shildi:
- background-clip
- background-origin
- background-size
Ko‘proq misollar
Misol
DIV elementining fonini o‘zgartiring:
document.getElementById("myDIV").style.background = "url('smiley.gif') blue repeat-x center";O‘zingiz sinab ko‘ring »
Misol
Hujjat uchun fon rangini o‘rnating:
document.body.style.backgroundColor = "red";O‘zingiz sinab ko‘ring »
Misol
Hujjat uchun fon rasmini o‘rnating:
document.body.style.backgroundImage = "url('img_tree.png')";O‘zingiz sinab ko‘ring »
Misol
Fon rasmini (background-image) no-repeat qilib o‘rnating:
document.body.style.backgroundRepeat = "repeat-y";O‘zingiz sinab ko‘ring »
Misol
Fon rasmini (background-image) qotirilgan qilib o‘rnating (aylanmaydi):
document.body.style.backgroundAttachment = "fixed";O‘zingiz sinab ko‘ring »
Misol
Fon rasmining (background-image) joylashuvini o‘zgartiring:
document.body.style.backgroundPosition = "top right";O‘zingiz sinab ko‘ring »
Misol
Hujjatning background xususiyati qiymatlarini qaytaring:
document.body.style.background;O‘zingiz sinab ko‘ring »
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!