Fon rasmlari
Deyarli har qanday HTML elementi uchun fon rasmi belgilanishi mumkin.
HTML elementida fon rasmi
HTML elementiga fon rasmi qo‘shish uchun HTML style atributi va CSS background-image xususiyatidan foydalaning:
Misol
<p> elementiga fon rasmini qo‘shing:
<p style="background-image: url('img_girl.jpg');">
O‘zingiz sinab ko‘ring »
Fon rasmini <head> bo‘limidagi <style> elementida ham belgilashingiz mumkin:
Misol
Fon rasmini <style> elementida belgilang:
<style>
p {
background-image: url('img_girl.jpg');
}
</style>
O‘zingiz sinab ko‘ring »
Sahifada fon rasmi
Butun sahifaga fon rasmi berishni istasangiz, fon rasmini <body> elementida belgilashingiz kerak:
Misol
Butun sahifa uchun fon rasmini qo‘shing:
<style>
body {
background-image: url('img_girl.jpg');
}
</style>
O‘zingiz sinab ko‘ring »
Fon takrorlanishi
Agar fon rasmi elementdan kichik bo‘lsa, u elementni to‘liq qoplaguncha gorizontal va vertikal yo‘nalishda takrorlanadi:
Misol
<style>
body {
background-image: url('example_img_girl.jpg');
}
</style>
O‘zingiz sinab ko‘ring »
Fon rasmining takrorlanishiga yo‘l qo‘ymaslik uchun background-repeat xususiyatini
no-repeat deb belgilang.
Misol
<style>
body {
background-image: url('example_img_girl.jpg');
background-repeat: no-repeat;
}
</style>
O‘zingiz sinab ko‘ring »
Fon qoplamasi
Agar fon rasmi butun elementni qoplashini istasangiz,
background-size xususiyatini cover. deb belgilashingiz mumkin.
Shuningdek, butun elementning doim qoplanganligiga ishonch hosil qilish uchun
background-attachment xususiyatini fixed: deb belgilang:
Bu usulda fon rasmi cho‘zilmasdan butun elementni qoplaydi (rasm o‘zining asl nisbatlarini saqlab qoladi):
Misol
<style>
body {
background-image: url('img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
</style>
O‘zingiz sinab ko‘ring »
Fon cho‘zilishi
Agar fon rasmi butun elementga mos kelguncha cho‘zilishini istasangiz,
background-size xususiyatini 100% 100% deb belgilashingiz mumkin:
Brauzer oynasining o‘lchamini o‘zgartirib ko‘ring va rasm cho‘zilishini, lekin doim butun elementni qoplab turishini ko‘rasiz.
Misol
<style>
body {
background-image: url('img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
</style>
O‘zingiz sinab ko‘ring »
CSS haqida ko‘proq o‘rganing
Yuqoridagi misollardan siz fon rasmlarini CSS fon xususiyatlari yordamida uslublash mumkinligini o‘rgandingiz.
CSS fon xususiyatlari haqida ko‘proq bilish uchun CSS fon darsligimizni o‘rganing.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!