CSS da asosiy fon va orqa fon uchun javob beradigan stil xususiyatlari quyidagilardan iborat:
Bu stil xususiyatlarini birma-bir ko'rib chiqamiz.
Background-color biror elementni yoki butun veb sahifani orqa foniga rang berishni ifodaylaydi va quyidagicha qo'llanniladi.
O'tgan darsimizda aytganimizdek, CSSda ranglar quuyidagicha e'lon qilinadi.
Quyidagi misolda h1, div va p elementlariga turli xil orqa fonlarni o'rnatamiz.
h1 {
background-color: green;
}
div {
background-color: lightblue;
}
p {
background-color: yellow;
}
Background-image orqali istalgan elementni yoki butun veb sahifani foni sifatida rasm qo'yish mumkin. U quyidagicha e'lon qilinadi.
Siz shunday rasm tanlashingiz kerakki, u foydalanuvchilarga halaqit qilmasin, matnlarni o'qishda ham qiyinchilikka duch kelmasin.
Siz rasmni biror veb sahifaga o'rnatganizdan keyin, xohlaysizmi yo yo'qmi, u rasm gorizontaliga va vertikaliga takrorlanadi.
Bu degani siz ekran o'lchamidan kichkina rasm tanlasangiz ham, ekran to'ldirguncha takrorlanadi.
Buni oldini olish maqsadida x o'qi bo'yicha yoki y o'qi bo'yicha takrorlanadigan qilib o'zimiz sozlashimiz mumkin.
body {
background-image: url("gradient_bg.png");
background-repeat: repeat-x;
}
Bundan tashqari, rasmni joylashuvga ko'ra e'lon qilsa ham bo'ladi:
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}
background-attachmentning qiymati orqali rasmning o'rnini oldindan belgilangan joyga o'rnatiladi.
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
}
Background - Shorthand orqali rasmning bir nechta qiymatlarini, bir vaqtning o'zida kiritishimiz mumkin.
body {
background: #ffffff url("img_tree.png") no-repeat right top;
}
Background - "Shorthand"ning qiymatlari quyidagi tartibda beriladi: