MohirDox

Ko'rinishi

HTML Fon rasmi ​

Fon rasmi deyarli har qanday HTML element uchun belgilanishi mumkin.

HTML elementga fon rasmi qo'shish ​

HTML elementga fon rasmi qo'shish uchun HTML style atributi va CSS background-image xususiyatidan foydalaning:

Misol

<p> elementga fon rasmi qo'shish:

html
<p style="background-image: url(img_qiz.jpg);">

Fon rasmini <style> elementida, <head> bo'limida ham belgilash mumkin:

Misol

Fon rasmini <style> elementida belgilash:

html
<style>
p {
  background-image: url(img_qiz.jpg);
}
</style>

Sahifaga fon rasmi qo'shish ​

Agar butun sahifaga fon rasmi qo'shmoqchi bo'lsangiz, fon rasmini <body> elementida belgilang:

Misol

Butun sahifa uchun fon rasmi qo'shish:

html
<style>
body {
  background-image: url(img_qiz.jpg);
}
</style>

Fon rasmini takrorlash ​

Agar fon rasmi elementdan kichik bo'lsa, rasm gorizontal va vertikal yo'nalishda element oxirigacha takrorlanadi.

Misol

html
<style>
body {
  background-image: url(misol_img_qiz.jpg);
}
</style>

Fon rasmini takrorlanmasligi uchun background-repeat xususiyatini no-repeat qilib belgilang.

Misol

html
<style>
body {
  background-image: url(misol_img_qiz.jpg);
  background-repeat: no-repeat;
}
</style>

Fon rasmini to'liq qoplash ​

Fon rasmi butun elementni to'liq qoplashi uchun background-size xususiyatini cover qilib belgilang.

Shuningdek, element har doim to'liq qoplanishi uchun background-attachment xususiyatini fixed qilib belgilang.

Bu usulda fon rasmi elementni to'liq qoplaydi va rasm o'z nisbatini saqlaydi:

Misol

html
<style>
body {
  background-image: url(img_qiz.jpg);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}
</style>

Fon rasmini cho'zish ​

Fon rasmi elementni to'liq qoplash uchun, background-size xususiyatini 100% 100% qilib belgilang:

Misol

html
<style>
body {
  background-image: url(img_qiz.jpg);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100% 100%;
}
</style>

Brauzer oynasini o'zgartirib ko'ring, rasm cho'ziladi, lekin har doim elementni to'liq qoplaydi.

CSS haqida ko'proq o'rganing ​

Yuqoridagi misollardan ko'rinib turibdiki, fon rasmlarini CSS background xususiyatlari yordamida bezash mumkin.

CSS background xususiyatlari haqida ko'proq bilish uchun CSS Background Tutorial sahifasini o'rganing.