CSS Orqa fon

CSS da orqa fon bilan ishlash

CSS da asosiy fon va orqa fon uchun javob beradigan stil xususiyatlari quyidagilardan iborat:

• background-color
• background-image
• background-repeat
• background-attachment
• background-position

Bu stil xususiyatlarini birma-bir ko'rib chiqamiz.

Background-color

Background-color biror elementni yoki butun veb sahifani orqa foniga rang berishni ifodaylaydi va quyidagicha qo'llanniladi.

body {
    background-color: lightblue;
}

O'tgan darsimizda aytganimizdek, CSSda ranglar quuyidagicha e'lon qilinadi.

1. Rangning o'zining nomi bilan - masalan "red"
2. RGB ning qiymati orqali - masalan "rgb(255, 0, 0)"
3. Rangning 16 lik sanoq sistemasidagi qiymati orqali - masalan "#2196F3"

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

Background-image orqali istalgan elementni yoki butun veb sahifani foni sifatida rasm qo'yish mumkin. U quyidagicha e'lon qilinadi.

body {
    background-image: url("keepgoing.jpg");
}

Siz shunday rasm tanlashingiz kerakki, u foydalanuvchilarga halaqit qilmasin, matnlarni o'qishda ham qiyinchilikka duch kelmasin.

Orqa fonning takrorlanishi

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 Attachment

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

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:

1. background-color
2. background-image
3. background-repeat
4. background-attachment
5. background-position