1. background-image va uning xossalari

Elementga fon rasmi qo'shish uchun background-image ishlatiladi. Yonidagi yordamchi xossalar fonni to'g'ri sozlashga yordam beradi:

• background-image: url(...) — fon rasmining manzili.
• background-size — rasmning o'lchami (cover, contain, yoki px/%).
• background-position — rasmning joylashuvi (center, top, 50% 50%).
• background-repeat — takrorlanishi (no-repeat, repeat, repeat-x).
• background-attachment — aylantirganda rasm harakati (scroll, fixed).

1.hero {
2  background-image: url("rasm.jpg");
3  background-size: cover;
4  background-position: center;
5  background-repeat: no-repeat;
6  height: 400px;
7}

Qisqa qilib bitta qatorda ham yozish mumkin:

1.hero {
2  background: url("rasm.jpg") center/cover no-repeat;
3}

2. Linear gradient

Gradient — rang o'zgarishi. Ikki yoki undan ortiq rang silliq bir-biriga o'tadi. Rasm o'rniga ishlatiladi, shuning uchun background-image ichiga yoziladi.

1.qut {
2  background: linear-gradient(to right, #3b82f6, #a855f7);
3}
4
5/* Burchak bilan */
6.qut2 {
7  background: linear-gradient(135deg, #f59e0b, #dc2626);
8}
9
10/* 3 ta rang */
11.qut3 {
12  background: linear-gradient(90deg, red, yellow, green);
13}

3. Radial va conic gradient

radial-gradient — rang markazdan atrofga tarqalib boradi (aylana shaklida). conic-gradient — rang burchak bo'yicha aylana atrofida aylanadi.

1.aylana {
2  background: radial-gradient(circle, #fbbf24, #dc2626);
3}
4
5.quyosh {
6  background: conic-gradient(red, yellow, green, blue, red);
7  border-radius: 50%;
8}

4. object-fit — rasmni konteynerga moslash

Odatda <img> o'z proporsiyasini saqlaydi. Agar width va height qat'iy berilsa, rasm cho'zilib ketadi. object-fit buni tuzatadi — xuddi background-size kabi rasmni qutiga moslaydi.

• cover — rasm qutini to'ldiradi (chekkalari kesilishi mumkin).
• contain — rasm butunicha ko'rinadi, bo'sh joy qolishi mumkin.
• fill — default, rasm cho'zilib qutini to'ldiradi.
• none — o'z o'lchamini saqlaydi.
• scale-down — contain va none orasida eng kichigini tanlaydi.

1img {
2  width: 200px;
3  height: 200px;
4  object-fit: cover;
5  object-position: center;
6  border-radius: 12px;
7}