Fon o‘lchami
CSS background-size xossasi
background-size xossasi fon rasmlari o‘lchamini belgilash imkonini beradi.
Fon o‘lchami uzunliklar, foizlar yoki quyidagi kalit so‘zlardan biri bilan belgilanishi mumkin: auto, contain yoki cover.
Quyidagi misol fon rasmini asl rasmdan ancha kichik qilib o‘lchamini o‘zgartiradi (piksellardan foydalanib):
Lorem Ipsum Dolor
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Misol
Fon o‘lchamini piksellarda belgilash:
#div1
{
background-image: url(img_flower.jpg);
background-position: right top;
background-repeat: no-repeat;
background-size: 100px 80px;
}
O‘zingiz sinab ko‘ring »
background-size — auto, contain va cover
background-size uchun kalit so‘z qiymatlari: auto, contain va cover.
auto qiymati standart qiymat bo‘lib, fon rasmini asl o‘lchamida ko‘rsatadi.
contain qiymati rasmni kontent maydoni ichiga sig‘adigan qilib kattalashtiradi yoki kichraytiradi.
cover qiymati rasmni imkon qadar katta masshtablaydi, shunda kontent maydoni fon rasmi bilan to‘liq qoplanadi (uning kengligi va balandligi kontent maydoniga teng yoki undan katta bo‘ladi).
Misol
Fon o‘lchamini contain, cover va auto bilan belgilash:
#div1 {
border: 1px solid black;
background-image:
url(img_flwr.gif);
background-repeat: no-repeat;
background-size: contain;
}
#div2
{
border: 1px solid black;
background-image: url(img_flwr.gif);
background-repeat: no-repeat;
background-size: cover;
}
#div3 {
border: 1px solid black;
background-image: url(img_flwr.gif);
background-repeat: no-repeat;
background-size: auto;
}
O‘zingiz sinab ko‘ring »
Bir nechta fon rasmlari o‘lchamini belgilash
background-size xossasi ko‘p fonlar bilan ishlashda bir nechta qiymatni ham qabul qiladi (vergul bilan ajratilgan ro‘yxat).
Quyidagi misolda uchta fon rasmi ko‘rsatilgan, har bir rasm uchun har xil background-size qiymati bilan:
Misol
#div1 {
background-image: url(img_tree.gif),
url(img_flwr.gif), url(paper.gif);
background-position: left top, right
bottom, left top;
background-repeat: no-repeat, no-repeat, repeat;
background-size:
contain, 150px, auto;
}
O‘zingiz sinab ko‘ring »
CSS to‘liq ekranli fon rasmi
Endi har doim butun brauzer oynasini qoplovchi fon rasmiga ega bo‘lishni xohlaymiz.
Talablar quyidagicha:
- Butun sahifani rasm bilan to‘ldirish (bo‘sh joy qolmasin)
- Rasmni kerakli darajada masshtablash
- Rasmni sahifa markaziga joylashtirish
- Aylantirish chiziqlari paydo bo‘lishiga yo‘l qo‘ymaslik
Bu yerda uslublarni <html> elementida belgilaymiz (<html> elementi har doim kamida brauzer oynasi balandligida bo‘ladi). So‘ng unga qat’iy va markazlashtirilgan fon beramiz. Keyin background-size xossasi bilan uning o‘lchamini sozlaymiz:
Misol
html {
background: url(img_man.jpg) no-repeat
center fixed;
background-size: cover;
}
O‘zingiz sinab ko‘ring »
CSS bosh banner rasmi (Hero Image)
<div> elementida turli fon xossalaridan foydalanib, hero rasm (matnli katta rasm) yaratib, uni xohlagan joyingizga joylashtirishingiz ham mumkin.
Misol
.hero-image {
background: url(img_man.jpg) no-repeat center;
background-size: cover;
height: 500px;
position:
relative;
}
O‘zingiz sinab ko‘ring »
CSS ilg‘or fon xossalari
| Xususiyat | Tavsif |
|---|---|
| background | Barcha background xossalarini bitta deklaratsiyada belgilash uchun qisqartma xossa |
| background-clip | Fonning bo‘yash maydonini belgilaydi |
| background-image | Element uchun bir yoki bir nechta fon tasvirini belgilaydi |
| background-origin | Fon rasmi(lari) qayerda joylashishini belgilaydi |
| background-size | Fon rasm(lar)ining o‘lchamini belgilaydi |
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!