Chapter 5 — Fon, Rasm va Gradient

---

5.1 Fon Rasmi Klasslari

Example

index.html
HTMLNusxalash
01<div class="bg-cover bg-center bg-no-repeat h-64" style="background-image: url('/hero.jpg')"></div>

Why Does It Exist?

Fon rasmi CSS'da background-size, background-position, background-repeat uch xususiyat orqali boshqariladi — Tailwind bularni qisqa klasslarga aylantiradi.

5.2 Gradient

Example

index.html
HTMLNusxalash
01<div class="bg-gradient-to-br from-purple-600 to-blue-500 h-32 rounded-xl"></div>

Real-world Usage

index.html
HTMLNusxalash
01<section class="bg-gradient-to-r from-slate-900 to-slate-700 text-white py-20 text-center">
02  <h1 class="text-5xl font-extrabold">Mahsulot nomi</h1>
03</section>

📝 Practice Exercises

🟢 Exercise 1 — Easy

Task: bg-gradient-to-r from-pink-500 to-orange-400 bilan to'rtburchak yarating.

🟡 Exercise 2 — Medium

Task: Hero Section naqshini o'zingiz takrorlang, lekin ranglarni ko'k tonlarga o'zgartiring.

🔴 Exercise 3 — Hard

Task: Fon rasmi ustiga qora shaffof qatlam (bg-black/40) qo'shib, ustiga oq matn joylashtiring (overlay effekti).

---

🐛 Debugging Challenge

index.html
HTMLNusxalash
01<div class="h-32" style="background-image: url('/photo.jpg')"></div>

Your Task: Rasm nega juda kichik yoki takrorlangan holda ko'rinadi?

<details> <summary>Solution</summary> `bg-cover`, `bg-center`, `bg-no-repeat` klasslari qo'shilmagan — brauzer standart holatda rasmni asl o'lchamida, chap-yuqori burchakdan takrorlab chizadi. </details>

---

📌 Chapter Summary

Fon rasm/gradient uchun bg-cover, bg-center standart kombinatsiya. Gradient 3 qism: yo'nalish, boshlanish (from-*), tugash (to-*).

🎯 Key Takeaways

• bg-cover + bg-center + bg-no-repeat — fon rasm uchun uchlik formula
• Gradient yo'nalishlari 8 xil (to-t/b/l/r/tr/tl/br/bl)
• Matn-fon kontrastini har doim tekshiring

⚡ Quick Cheat Sheet

code.text
TEXTNusxalash
01Fon rangi:   bg-{color}-{shade}
02Gradient:    bg-gradient-to-{r|l|t|b|br|bl|tr|tl}
03Gradient rang: from-{color} via-{color} to-{color}
04Rasm:        bg-cover, bg-center, bg-no-repeat

---