Zahiriddin muhammadbobur nomidagi andijon davlat universiteti

Fon rangi

▶ background-color yordamida fon rangi belgilanadi.
body { background-color: green; }
td { background-color: #ccffee; }
Atribut mohiyati tarzida transparent so'zi ishlatilishi mumkin. Bu fonning shaffofligini anglatadi.
body { background-color: transparent; }

Fon surat

▶ background-image atributi yordamida suratning URL-manzilini ko'rsatish orqali, undan fon surat tarzida foydalanish mumkin. Absolyut yoki nisbiy (HTML-hujjat emas balki, stillar jadvali joylashuviga nisbatan) URL-manzil ko'rsatilishi mumkin.
body { background-image: url(surat1.gif; }
Atribut mohiyati sifatida none so'zi ishlatilishi mumkin. Bunda fon surat o'chirilgan hisoblanadi.
body { background-image: none; }

Fon suratni takrorlash

▶ background-repeat atributi fon suratning takrorlanish rejimini belgilaydi va quyidagi mohiyatlarni qabul qilishi mumkin:
▷ repeat - surat ham vertikal, ham gorizontal yo'nalishda takrorlanadi (jimlikdagi holat).
body {background-image:url(surat1.gif); background-repeat:repeat;}
▷ repeat-x - surat gorizontal yo'nalishda takrorlanadi.
body {background-image:url(surat1.gif); background-repeat:repeat-x;}
▷ repeat-y - surat vertikal yo'nalishda takrorlanadi.
body {background-image:url(surat1.gif); background-repeat:repeat-y;}
▷ no-repeat - surat takrorlanmaydi.
body {background-image:url(surat1.gif); background-repeat:no-repeat;}
Bu yerda sarlavhada ko'rsatilgan surat takrorlangan.

Fon surat prokrutkasi

▶ background-attachment atributi fon suratning boshqa elementlar bilan birga aylanma-siljishini aniqlaydi va quyidagi mohiyatlarni qabul qiladi:
▷ scroll - fon surat brauzer oynasi elementlarini aylanma-siljitganda sahifa elementlari bilan birga harakatlanadi (jimlikdagi holat).
body {background-image:url(surat1.gif); background-repeat:no-repeat; background-attachment:scroll;}
▷ fixed - fon surat brauzer oynasi elementlarini aylanma-siljitganda sahifa elementlari bilan birga harakatlanmaydi.
body {background-image:url(surat1.gif); background-repeat:no-repeat; background-attachment:fixed;}