CSS fonlar: background xususiyatlari va ko'p qatlamli fon

Qisqacha: Element foni — eng pastda background-color, ustida background-image qatlamlari. Vergul bilan bir necha rasm yozilsa, birinchisi eng ustda turadi. background-size: cover qutini to'liq yopadi (rasm kesiladi), contain rasmni to'liq ko'rsatadi (bo'sh joy qoladi). background qisqa yozuvi yozilmagan qismlarni — rangni ham — boshlang'ich qiymatga qaytaradi. Ma'lumot beradigan rasm — <img>, faqat bezak — fon.

Bu darsda

• Fon rasmini ulaysiz va uning yo'li CSS faylga nisbatan hisoblanishini bilasiz.
• Rasmning takrorlanishi, joyi va o'lchamini boshqarasiz — cover va contain farqi bilan.
• Fon qutining qaysi qismini egallashini (clip, origin) va skrollda o'zini qanday tutishini (attachment) tanlaysiz.
• Bir necha qatlamli fon yozasiz va background qisqa yozuvining tuzog'idan qochasiz.
• Rasm <img> bo'lishi kerakmi yoki fon — accessibility va LCP bo'yicha asoslaysiz; image-set() ni qo'llaysiz.

Oldin bilishingiz kerak: Box model, CSS nima (qisqa yozuv), figure va figcaption (img yoki fon), Rasm unumdorligi (LCP), Overflow.

1. Nega bu kerak?

figure va figcaption darsida qaror qilgan edik: «Bahor» bosh sahifasidagi qozon surati — bezak. U img emas, CSS fon rasmi bo'ladi. Yaxshi alt matn darsida ham "bezak rasmlarning ko'pini CSS'ga qo'yish to'g'ri" degandik. Endi CSS'ni bilamiz — qarorni amalga oshiramiz.

Jasur aka sarlavha bloki dasturxonga o'xshashini xohlaydi: qaymoq fon, mayda naqsh va burchakda piyola. Dars oxirida shunday blok yasaymiz:

<style>
  :root {
    --rang-asosiy: #2f6b3a;
    --rang-fon: #fffaf0;
  }
  header {
    padding: 2rem 1rem;
    border-radius: 12px;
    background:
      url("data:image/svg+xml,<svg \
xmlns='http://www.w3.org/2000/svg' width='32' height='20'>\
<path d='M2 2h28a14 14 0 0 1-28 0z' fill='%23b4461a'/></svg>")
        no-repeat right 1rem bottom 1rem / 3rem,
      url("data:image/svg+xml,<svg \
xmlns='http://www.w3.org/2000/svg' width='16' height='16'>\
<circle cx='8' cy='8' r='2' fill='%232f6b3a' opacity='0.3'/>\
</svg>")
        var(--rang-fon);
  }
  h1 {
    margin: 0;
    color: var(--rang-asosiy);
  }
</style>
<header>
  <h1>Choyxona «Bahor»</h1>
  <p>Har kuni 7:00 dan 23:00 gacha</p>
</header>

Nimaga qarang: qaymoq fon ustida bir tekis yashil nuqtali naqsh, o'ng pastki burchakda — qizg'ish piyola. HTML'da bitta ham img yo'q — hammasi CSS'da. Hozir bu kod qo'rqinchli ko'rinadi. Dars davomida uni qatorma-qator yig'amiz.

2. Fon rangi va fon rasmi

2.1 background-color — eng pastki qatlam

background-color ni CSS nima darsidan beri yozyapmiz. Uning boshlang'ich qiymati — transparent, ya'ni shaffof: orqadagi ota fon ko'rinadi. Box model darsidan eslang: fon mazmun, padding va chegara ostiga tushadi, margin'ga esa tushmaydi.

Fon rangi — doim eng pastda. Rasm bo'lsa, u rang ustiga chiziladi. Rasmning shaffof joylaridan rang ko'rinib turadi.

2.2 background-image va url()

.sarlavha {
  background-image: url("../images/naqsh.svg");
}

url() — fayl manzilini beradigan funksiya. Qo'shtirnoq ixtiyoriy, lekin yozib yuring: bo'sh joyli nomlarda kerak bo'ladi.

Eng ko'p uchraydigan xato — yo'l. CSS ichidagi nisbiy yo'l HTML sahifaga emas, CSS faylning o'ziga nisbatan hisoblanadi. «Bahor»ning CSS fayli — assets/css/asosiy.css, rasmlar esa assets/images/ da. Brauzer url() ni asosiy.css turgan papkadan — assets/css/ dan — qidiradi. Shuning uchun avval bir papka tepaga chiqish kerak: ../images/naqsh.svg.

Bu qulay: CSS fayl bitta, u qaysi sahifaga ulansa ham rasm yo'li o'zgarmaydi. Xato yo'lda brauzer hech narsa demaydi — fon shunchaki bo'sh qoladi. DevTools'ning Network panelida esa qizil 404 chiqadi (CSS nima darsidagi kabi).

2.3 Darsdagi rasmlar: data: manzil

Dars natija oynasida assets/images/ papkasi yo'q. Shuning uchun misollarda rasmni to'g'ridan-to'g'ri manzil ichiga yozamiz. Bu — data URL: fayl manzili o'rniga faylning o'zi, data: bilan boshlanadi. Kichik SVG uchun bu hatto real loyihada ham ishlatiladi.

.naqsh {
  background-image: url("data:image/svg+xml,<svg \
xmlns='http://www.w3.org/2000/svg' width='16' height='16'>\
<circle cx='8' cy='8' r='2' fill='%232f6b3a'/></svg>");
}

Ikki g'alati joy bor:

• %23 — bu # belgisi. URL ichida # maxsus ma'noga ega — Sahifa ichidagi havolalar darsidagi fragment, shuning uchun rang kodida uning o'rniga %23 yoziladi.
• Qator oxiridagi \ — CSS satri ichida "keyingi qatorda davom etadi" degani. Brauzer \ ni va yangi qatorni tashlab yuboradi. Biz uni faqat uzun manzil telefon ekraniga sig'sin deb ishlatamiz.

Bu kodni yodlash shart emas. Real loyihada rasm alohida faylda turadi va url("../images/naqsh.svg") yoziladi. Data URL — faqat natijada rasm ko'rinsin deb.

3. Takrorlanish, joy va o'lcham

3.1 background-repeat

Rasm qutidan kichik bo'lsa, brauzer uni kafel kabi takrorlaydi — repeat. Boshqa qiymatlar:

<style>
  :root {
    --rang-asosiy: #2f6b3a;
  }
  p {
    width: 230px;
    height: 70px;
    margin: 0 0 10px;
    border: 1px solid var(--rang-asosiy);
    background-image: url("data:image/svg+xml,<svg \
xmlns='http://www.w3.org/2000/svg' width='32' height='20'>\
<path d='M2 2h28a14 14 0 0 1-28 0z' fill='%23b4461a'/></svg>");
  }
</style>
<p style="background-repeat: no-repeat">no-repeat</p>
<p style="background-repeat: repeat-x">repeat-x</p>
<p style="background-repeat: space">space</p>
<p style="background-repeat: round">round</p>

Nimaga qarang:

• no-repeat — bitta piyola, chap-yuqori burchakda.
• repeat-x — faqat gorizontal qator (vertikal uchun — repeat-y).
• space — piyolalar butun holda, orasida teng bo'shliq bilan. Chetda kesilgan piyola yo'q.
• round — piyolalar biroz cho'zilgan yoki siqilgan, lekin qutini bo'shliqsiz, butun sonda to'ldiradi.

Oddiy repeat da chetdagi piyolalar yarmidan kesilib qolardi. Naqsh uchun bu normal, ikonkalar uchun — xunuk.

3.2 background-position

Rasm qayerdan boshlanishini aytadi. Standart qiymat — 0% 0%, ya'ni chap-yuqori burchak. Qiymat ikki qismdan iborat: gorizontal va vertikal.

• Kalit so'zlar: left, center, right va top, center, bottom. right bottom — o'ng pastki burchak. Bitta so'z yozilsa, ikkinchisi center.
• Foizlar: 50% 50% — markaz. Foiz rasmning shu nuqtasini qutining shu nuqtasiga qo'yadi: 100% 100% da rasmning o'ng pastki burchagi qutining o'ng pastki burchagiga tushadi.
• Chetdan masofa: right 1rem bottom 1rem — o'ng chetdan 1rem, pastki chetdan 1rem ichkarida. Burchakdagi ikonka uchun eng qulay yozuv.

3.3 background-size: cover va contain

auto — rasmning o'z o'lchami. Bitta qiymat (3rem) — en, bo'yi esa nisbatga qarab o'zi hisoblanadi. Ikki qiymat — en va bo'y (nisbat buzilishi mumkin). Eng muhim ikki kalit so'z:

• cover — rasm qutini to'liq yopadi. Nisbat saqlanadi, sig'magan qismi kesiladi.
• contain — rasm to'liq ko'rinadi. Nisbat saqlanadi, qutida bo'sh joy qolishi mumkin.

<style>
  :root {
    --rang-asosiy: #2f6b3a;
  }
  p {
    width: 280px;
    height: 90px;
    margin: 0 0 10px;
    border: 1px solid var(--rang-asosiy);
    background-color: #e8f1ec;
    background-image: url("data:image/svg+xml,<svg \
xmlns='http://www.w3.org/2000/svg' width='300' height='200'>\
<rect width='300' height='200' fill='%23fde2c4'/>\
<circle cx='150' cy='100' r='80' fill='%232f6b3a'/></svg>");
  }
  .qoplash {
    background-size: cover;
    background-position: center;
  }
  .sigdirish {
    background-size: contain;
    background-position: center;
  }
  .sigdirish-yakka {
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
  }
</style>
<p class="qoplash">cover</p>
<p class="sigdirish">❌ contain</p>
<p class="sigdirish-yakka">✅ contain + no-repeat</p>

Nimaga qarang: rasm 3:2 nisbatda — och sariq to'rtburchak, o'rtasida yashil doira. Birinchi qutini (cover) rasm to'liq yopdi: rasmning tepasi va pasti kesildi, doira ham kesilgan. Ikkinchi qutida (contain) rasm to'liq ko'rindi, lekin takrorlanib ketdi — repeat hali o'z joyida. Uchinchisida no-repeat bilan rasm bitta, ikki yonida esa fon rangi. contain deyarli doim no-repeat bilan birga yoziladi.

cover — katta sarlavha (banner) suratlari uchun: quti o'lchami qanday bo'lmasin, bo'sh joy qolmaydi. Rasmning qaysi qismi kesilishini background-position hal qiladi: taomning o'zi rasmning pastida bo'lsa — center bottom. contain — logotip yoki kesilmasligi kerak bo'lgan rasm uchun.

Tekshirib ko'ring: Quti 400×100, fon rasmi 200×200. background-size: cover da rasm ekranda qanday o'lchamda chiziladi va uning qancha qismi ko'rinadi?

4. Fon qutining qaysi qismida

4.1 background-clip — qayergacha bo'yaladi

Fon standart holatda chegara ostigacha yetadi — border-box. Yaxlit chegarada buni ko'rmaysiz, uzuq-uzuq chegarada esa ko'rinadi:

<style>
  :root {
    --rang-asosiy: #2f6b3a;
  }
  p {
    width: 200px;
    margin: 0 0 12px;
    padding: 12px;
    border: 6px dashed var(--rang-asosiy);
    background-color: #fde2c4;
  }
</style>
<p>border-box (standart)</p>
<p style="background-clip: padding-box">padding-box</p>
<p style="background-clip: content-box">content-box</p>

Nimaga qarang: birinchi qutida shtrixlar orasidagi bo'shliqlar ham sariq — fon chegara ostida. Ikkinchisida fon chegaraning ichki chetida to'xtadi, shtrixlar orasi oq. Uchinchisida faqat matn joyi bo'yalgan, padding ham oq qoldi.

background-clip: text degan qiymat ham bor: fon faqat harflar ichiga chiziladi, matn rangi esa shaffof qilinadi (color: transparent). Uning asosiy ishlatilishi — gradient matn, Matn bezagi darsida. U Baseline EMAS: MDN ma'lumotiga ko'ra, Firefox'da u "qisman" — ba'zi murakkab holatlarda (masalan, ko'p qatlamli fonda) to'g'ri chizilmaydi. Shuning uchun oddiy holatda qo'llang va zaxira matn rangini o'ylab qo'ying.

4.2 background-origin — qayerdan boshlanadi

background-position: 0 0 qaysi burchakni bildiradi? Standart holatda — padding chetini (padding-box): rasm chegara ichida, padding boshlanadigan joydan boshlanadi. content-box bersangiz, rasm padding ichidagi mazmun chetidan boshlanadi. border-box — chegaraning tashqi chetidan.

Farq: clip — fon qayerda ko'rinadi, origin — rasm qayerdan o'lchanadi. Ikkalasi ham kamdan-kam kerak. Lekin keyingi darsdagi gradient chegara hiylasi aynan clip ga tayanadi (Gradientlar).

5. background-attachment — skrollda fon

5.1 Uch qiymat

• scroll (standart) — fon elementga yopishgan. Sahifani sursangiz, element bilan birga ketadi.
• fixed — fon brauzer oynasiga yopishgan. Sahifa suriladi, fon esa joyida turadi — go'yo element "oyna"dan orqadagi rasmga qaragandek.
• local — skroll konteyner ichida fon kontent bilan birga suriladi.

5.2 local va skroll konteyner

Overflow darsidagi "Bugungi taomlar" ro'yxatini daftar varag'iga o'xshatamiz — har qator ostida chiziq:

<style>
  :root {
    --rang-asosiy: #2f6b3a;
  }
  .bugun {
    display: inline-block;
    width: 150px;
    height: 5rem;
    margin: 0 12px 0 0;
    padding: 0 8px;
    overflow-y: auto;
    border: 2px solid var(--rang-asosiy);
    background-image: url("data:image/svg+xml,<svg \
xmlns='http://www.w3.org/2000/svg' width='10' height='20'>\
<rect y='19' width='10' height='1' fill='%232f6b3a'/></svg>");
    line-height: 20px;
  }
  .bugun p {
    margin: 0;
  }
  .birga {
    background-attachment: local;
  }
</style>
<div class="bugun"><p>scroll</p><p>Osh</p><p>Lag'mon</p>
<p>Manti</p><p>Kabob</p></div>
<div class="bugun birga"><p>local</p><p>Osh</p><p>Lag'mon</p>
<p>Manti</p><p>Kabob</p></div>

Nimaga qarang: ikkala ro'yxatni ham ichida suring. Chapdagida chiziqlar joyida turadi, matn esa ular ustidan sirg'alib o'tadi — so'zlar chiziqlardan "chiqib ketadi". O'ngdagida (local) chiziqlar matn bilan birga suriladi, har so'z o'z chizig'ida qoladi. line-height: 20px qator balandligini rasm balandligiga tenglaydi — uni Qator balandligi darsida o'rganamiz.

5.3 fixed — ehtiyot bilan

fixed bilan "parallaks" effekti qilinadi: sarlavha surati joyida turadi, matn uning ustidan o'tadi. Lekin background-attachment Baseline EMAS — aynan fixed sabab. MDN ma'lumotiga ko'ra, iPhone va iPad'dagi Safari fixed qiymatini taniydi, lekin hech qanday ta'sir qilmaydi. U yerda fon oddiy scroll kabi suriladi. Sahifa buzilmaydi, faqat effekt yo'q. Katta fixed fon zaif telefonda skrollni sekinlashtirishi ham mumkin. Shuning uchun fixed ga muhim narsani ishonmang — u faqat "bo'lsa yaxshi" bezak.

6. Ko'p qatlamli fon

6.1 Vergul bilan qatlamlar

background-image ga vergul bilan bir nechta rasm berish mumkin. Brauzer ularni ustma-ust qo'yadi: birinchisi — eng ustda, oxirgisi — eng pastda, undan ham pastda esa fon rangi.

header {
  background-image: url("piyola.svg"), url("naqsh.svg");
  background-repeat: no-repeat, repeat;
  background-position: right 1rem bottom 1rem, 0 0;
  background-size: 3rem, auto;
  background-color: #fffaf0;
}

Qolgan xususiyatlarning qiymatlari ham vergul bilan, tartib bo'yicha qatlamlarga taqsimlanadi. Birinchi qiymat — birinchi rasmga, ikkinchisi — ikkinchisiga. Qiymat kamroq bo'lsa, ro'yxat boshidan takrorlanadi. Fon rangi esa bitta: u doim eng pastki qavat.

Choyxonadagi dasturxonni tasavvur qiling. Eng pastda — stol (fon rangi). Ustida — naqshli dasturxon (ikkinchi qatlam). Uning ustida — piyola (birinchi qatlam). Siz piyolani ko'rasiz, piyola ostidagi dasturxonni emas.

flowchart TB
  A["1-rasm: piyola<br/>eng ustda"] --> B["2-rasm: naqsh"]
  B --> C["background-color<br/>eng pastda"]

Nimaga qarang: CSS'da birinchi yozilgan rasm — ko'zga eng yaqin qatlam. Rang esa har doim eng tagida.

6.2 Qisqa yozuv background

Xuddi shu kod qisqa yozuvda:

header {
  background:
    url("piyola.svg") no-repeat right 1rem bottom 1rem / 3rem,
    url("naqsh.svg") #fffaf0;
}

Qoidalari:

• Qatlamlar vergul bilan, birinchisi eng ustda.
• Joy va o'lcham / bilan birga yoziladi: right 1rem bottom 1rem / 3rem — "shu joyda, shu o'lchamda". O'lchamni joysiz yozib bo'lmaydi: / 3rem yolg'iz xato.
• Rang faqat oxirgi qatlamda. Birinchi qatlamga rang yozsangiz, butun deklaratsiya tashlanadi.
• Qolgan qismlar ixtiyoriy tartibda.

Endi dars boshidagi natijani qayta o'qing — xuddi shu tuzilma, faqat rasmlar data URL ko'rinishida.

6.3 Tuzoq: qisqa yozuv rangni o'chiradi

CSS nima darsida border qisqa yozuvi rangni qayta tiklaganini ko'rgan edingiz. background ham xuddi shunday — va bu yerda xato ko'proq uchraydi:

<style>
  :root {
    --rang-asosiy: #2f6b3a;
    --rang-fon: #fffaf0;
  }
  header {
    padding: 1rem;
    border: 1px solid var(--rang-asosiy);
    background-color: var(--rang-fon);
    background: url("data:image/svg+xml,<svg \
xmlns='http://www.w3.org/2000/svg' width='16' height='16'>\
<circle cx='8' cy='8' r='2' fill='%232f6b3a'/></svg>");
  }
</style>
<header>
  <h1>Choyxona «Bahor»</h1>
</header>

Nimaga qarang: naqsh bor, lekin fon qaymoq emas, oq. background da rang yozilmagan — u background-color ni boshlang'ich transparent ga qaytardi. Yuqoridagi background-color bekor bo'ldi. Chrome DevTools Computed'da background-color: rgba(0, 0, 0, 0) ko'rinadi.

Ikki to'g'ri yo'l: rangni qisqa yozuvning o'ziga, oxirgi qatlamga qo'shing (url(...) var(--rang-fon)). Yoki avval qisqa yozuv, keyin background-color — to'liq yozuv doim qisqasidan keyin.

Tekshirib ko'ring: background: url("a.svg") no-repeat, url("b.svg") red, url("c.svg"); — nega brauzer bu qatorni butunlay tashlab yuboradi?

7. Fon rasmi yoki <img>?

figure va figcaption darsidagi test: rasmni olib tashlasangiz, foydalanuvchi ma'lumot yo'qotadimi? Ha — img, yo'q — fon. Endi CSS tomonidan bu tanlovning oqibatlarini ko'ramiz:

Eng muhim qator — uchinchisi. Rasm unumdorligi darsidan eslang: LCP — ekrandagi eng katta elementning chizilish vaqti. Katta fon surati ham LCP bo'la oladi. Lekin brauzer uni HTML'dan emas, CSS faylni yuklab, o'qib bo'lgandagina topadi. Muhim fon rasmi uchun o'sha darsdagi <link rel="preload" as="image"> kerak bo'ladi.

Accessibility qoidasi: fon rasmida matn bo'lmasin va u yagona ma'lumot manbai bo'lmasin. Fon rasmi ustidagi matn uchun doim mos background-color bering. Rasm yuklanmaguncha (yoki umuman yuklanmasa) matn shu rang ustida o'qiladi.

8. image-set() — ekranga mos fon rasmi

Responsive rasmlar darsida img ga srcset bilan bir necha o'lchamni bergan edik. Telefon ekranlarining ko'pchiligi "zich": bitta CSS piksel ichida 2–3 ta haqiqiy nuqta bor. Oddiy rasm bunday ekranda xira ko'rinadi. Fon rasmi uchun ham shunday tanlov bor — image-set():

.sarlavha {
  background-image: url("../images/qozon.jpg");
  background-image: image-set(
    "../images/qozon.jpg" 1x,
    "../images/qozon@2x.jpg" 2x
  );
}

• 1x — oddiy ekran uchun, 2x — ikki barobar zich ekran uchun. Brauzer o'zi mosini tanlaydi va faqat shuni yuklaydi.
• Format bo'yicha tanlash ham mumkin: image-set("qozon.avif" type("image/avif"), "qozon.jpg" type("image/jpeg")). Brauzer tushunadigan birinchi formatni oladi.
• Birinchi background-image qatori — juda eski brauzer uchun zaxira. U image-set() ni tushunmasa, ikkinchi deklaratsiyani tashlab ketadi va birinchisi qoladi (CSS nima darsidagi "kechirimli o'qish").

Baseline ma'lumotiga ko'ra, image-set() — type() bilan birga — Baseline, 2023-yil sentabrdan hamma asosiy brauzerda bor. Zaxira qatori bugun deyarli kerak emas, lekin zarari ham yo'q. Fon rasmlarini ekran eniga qarab almashtirish — Rasmlar: CSS tomoni darsida.

9. Ko'p uchraydigan xatolar

9.1 Yo'l HTML'ga nisbatan yozilgan

asosiy.css da url("assets/images/naqsh.svg") — brauzer assets/css/assets/images/ ni qidiradi. Fon bo'sh, Network'da 404. Tuzatish: yo'l CSS faylga nisbatan: url("../images/naqsh.svg").

9.2 Qisqa yozuv rangni o'chirdi

background-color dan keyin background: url(...) — rang shaffofga qaytdi. Tuzatish: rangni qisqa yozuvning oxirgi qatlamiga yozing yoki background-color ni undan keyin qo'ying.

9.3 contain bilan rasm takrorlandi

Tuzatish: no-repeat qo'shing. cover da bu muammo yo'q — rasm qutini to'liq yopadi.

9.4 Rasm ustidagi matn o'qilmaydi

Sekin internetda rasm hali yuklanmagan — oq matn oq fonda. Tuzatish: rasmning asosiy rangiga yaqin background-color — rasm kelguncha ham, kelmasa ham matn o'qiladi.

9.5 # data URL ichida

fill='#2f6b3a' — # dan keyingi hamma narsa URL uchun "fragment" bo'lib qoladi va rasm buziladi. Tuzatish: %23.

10. Mashqlar

Mashqlarni kurs/mashqlar/05/ papkasida bajaring.

1-mashq (oson): Qisqa yozuvni yig'ing

.aksiya {
  background-color: #fde2c4;
  background-image: url("../images/foiz.svg");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 2rem;
}

Shu beshta qatorni bitta background qisqa yozuviga yig'ing: background: url("../images/foiz.svg") right 8px center 2rem ;

Ishora: joy va o'lcham / bilan birga, rang — qatlam oxirida.

.aksiya {
  background: url("../images/foiz.svg") no-repeat right 8px center
    / 2rem #fde2c4;
}

2-mashq (o'rta): «Bahor» footer'i

Footer to'q yashil (--rang-asosiy), ustida och rangli nuqtali naqsh, o'ng pastki burchakda piyola.

1. Ikki qatlamli fon: piyola (bitta, o'ng chetdan va pastdan 1rem ichkarida, eni 2.5rem) va naqsh (takrorlanadi).
2. Rang — qisqa yozuv ichida, to'g'ri joyda.
3. Footer matni qaymoq rangda.

Rasmlar: real loyihada assets/images/piyola.svg va assets/images/naqsh.svg. Natijada ularni data URL qilib yozing — nuqta rangi %23fffaf0 (qaymoq), shaffofligi 0.3.

Ishora: "Qisqa yozuv background" bo'limidagi tuzilma. Rang oxirgi qatlam oxirida.

footer {
  padding: 1rem 5rem 1rem 1rem;
  color: var(--rang-fon);
  background:
    url("../images/piyola.svg") no-repeat right 1rem bottom 1rem
      / 2.5rem,
    url("../images/naqsh.svg") var(--rang-asosiy);
}

<style>
  :root {
    --rang-asosiy: #2f6b3a;
    --rang-fon: #fffaf0;
  }
  footer {
    padding: 1rem 5rem 1rem 1rem;
    color: var(--rang-fon);
    background:
      url("data:image/svg+xml,<svg \
xmlns='http://www.w3.org/2000/svg' width='32' height='20'>\
<path d='M2 2h28a14 14 0 0 1-28 0z' fill='%23fffaf0'/></svg>")
        no-repeat right 1rem bottom 1rem / 2.5rem,
      url("data:image/svg+xml,<svg \
xmlns='http://www.w3.org/2000/svg' width='16' height='16'>\
<circle cx='8' cy='8' r='2' fill='%23fffaf0' \
opacity='0.3'/></svg>")
        var(--rang-asosiy);
  }
</style>
<footer>
  <p>Choyxona «Bahor» · har kuni 7:00–23:00</p>
  <p>Chilonzor tumani, Toshkent</p>
</footer>

3-mashq (qiyin): Banner'dagi to'rt xato

Stajyor bosh sahifa banneri uchun yozdi (CSS fayl — assets/css/asosiy.css, surat — assets/images/qozon.jpg, 1600×600):

.banner {
  min-height: 20rem;
  background-color: #3b2a1e;
  background: url("assets/images/qozon.jpg") contain;
  color: #fffaf0;
}

Shikoyatlar: surat umuman chiqmayapti; to'g'rilangandan keyin esa u kichik bo'lib, takrorlanib ketdi; sekin internetda oq sarlavha oq fonda ko'rinmay qoldi.

1. To'rt xatoni toping.
2. Tuzatilgan CSS'ni yozing: surat bannerni to'liq yopsin, qozon (suratning pastki qismida) kesilib ketmasin.

Ishora: uch savolni eslang. url() yo'li nimaga nisbatan hisoblanadi? Qisqa yozuvda o'lcham qayerda turadi? Qisqa yozuv rangni qanday o'chiradi?

.banner {
  min-height: 20rem;
  color: #fffaf0;
  background: url("../images/qozon.jpg") no-repeat center bottom
    / cover #3b2a1e;
}

4-mashq: Portfolio qadami — 404 sahifasiga bezak

Portfoliongizning 404.html sahifasi bo'sh ko'rinadi: sarlavha, bitta gap va havola. Unga bezak qo'shamiz — favicon'ingizni. U bezak, ma'lumot bermaydi, demak img emas, fon.

1. 404 sahifasidagi main ga (Viewport birliklari darsidagi main:not([id]) selektori) fon rasmi bering: favicon.svg, bitta, o'ng chetdan va pastdan 1rem ichkarida, eni 4rem.
2. Yo'lni to'g'ri yozing. 404.html dagi HTML havolalari / bilan boshlanadi — CSS'dagi yo'l-chi?
3. Qisqa yozuvda bu elementning fon rangi yo'qolmasligini tekshiring.

Ishora: yo'l CSS fayldan hisoblanadi. favicon.svg sayt ildizida, CSS fayl esa assets/css/ da.

main:not([id]) {
  padding-top: 20vh;
  padding-top: 20svh;
  background: url("../../favicon.svg") no-repeat right 1rem
    bottom 1rem / 4rem;
}

11. Real ishda

• Banner va "hero" bloklar — cover + center + fon rangi zaxirasi. Katta saytlar muhim banner uchun preload qo'shadi yoki uni img qilib, object-fit bilan joylaydi (Rasm va media).
• Ikonkali maydonlar — qidiruv maydonidagi lupa, tanlov ro'yxatidagi strelka ko'pincha background-image + no-repeat + right ... center.
• Naqsh va teksturalar — kichik SVG, repeat bilan. Bir necha yuz baytlik fayl butun sahifani bezaydi.
• Intervyuda so'raladi: "cover va contain farqi?", "Fon rasmi yoki img — qanday tanlaysiz?", "Ko'p qatlamli fonda qaysi qatlam ustda?", "background qisqa yozuvining tuzog'i nima?".

Xulosa

• Fon = pastda background-color + ustida background-image qatlamlari (birinchisi eng ustda).
• CSS'dagi url() yo'li CSS faylga nisbatan hisoblanadi.
• repeat, position, size — takrorlanish, joy, o'lcham; cover yopadi va kesadi, contain to'liq ko'rsatadi (no-repeat bilan).
• clip — fon qayergacha, origin — qayerdan; attachment: local skroll konteynerda kontent bilan suriladi, fixed iPhone'da ishlamaydi.
• background qisqa yozuvi rangni ham tiklaydi; rang — oxirgi qatlam oxirida, joy va o'lcham — / bilan.
• Ma'lumotli rasm — img, bezak — fon; muhim fon rasmi LCP'da kechikadi; image-set() — zich ekran va format uchun.

Keyingi dars: Gradientlar — rasm faylsiz fon: chiziqli, radial va konusli gradientlar, chiziqlar, naqshlar va gradient chegara.

Manbalar

• MDN: "background", "background-size", "background-position", "background-clip", "background-origin", "background-attachment", "image-set()", "Using multiple backgrounds" — developer.mozilla.org
• W3C: "CSS Backgrounds and Borders Module Level 3" — w3.org/TR/css-backgrounds-3
• web.dev: "Largest Contentful Paint (LCP)" — web.dev/articles/lcp
• web-features (Baseline ma'lumotlari): "image-set", "background-clip-text", "background-attachment" — github.com/web-platform-dx/web-features