Orqafon rasmlar

Orqa fon rasmlar deyarli har qanday HTML elementlari uchun berilishi mumkin.

PreviousRasm xaritalari NextPicture elementi

Last updated 1 year ago

Orqafon rasmlar

Orqa fon rasmlar deyarli har qanday HTML elementlari uchun berilishi mumkin.

HTML elementining orqafon rasmi

HTML elementiga orqa fon rasm berish uchun HTMLning style attributidan va CSSning background-img xususiyatidan foydalaniladi:

Elementga orqa fon rasm qo

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

Bundan tashqari, <head> qismida <style> elementi ichida berishingiz ham mumkin:

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

Sahifaning orqafon rasmi

Agar butun sahifaning orqafoniga rasm qo'yishni hohlsangiz, rasmni <body> elementiga berishingiz kerak:

Butun sahifa uchun orqafon rasm qo

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

Background repeat

Agar rasm elementdan kichik bo'lsa, u elementning ohiriga borguncha gorizontal va vertikal shaklda takrorlanaveradi.

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

Orqafon rasm takrorlanmasligi uchun background-repeat xususiyatiga no-repeat qiymatini bering.

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

Background cover

Agar orqafon rasmi butun elementni qamrab olishini istasangiz, background-size xususiyatiga cover qiymatini berishingiz mumkin.

Bundan tashqari, butun element har doim qamrab olingan holatda ekanligiga ishonchingiz komil bo'lishi uchun background-attachmentxususiyatiga fixed qiymatini bering.

Shunday qilib, orqafon rasmi cho'ziln ketmasdan butun elementni qamrab oladi (rasm asl holatini saqlab qoladi):

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

Background Stretch

Agar fon rasmi butun elementga mos turishini xohlasangiz, background-size xususiyatiga 100% 100% qiymatlarini berishingiz mumkin.

Brauzer oynasining o'lchamini o'zgartirib ko'ring va rasmning cho'zilayotganiga guvoh bo'lasiz, lekin u har doim butun elementni qamrab turadi.

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

PreviousRasm xaritalari NextPicture elementi

Last updated 1 year ago

HTML elementining orqafon rasmi

HTML elementiga orqa fon rasm berish uchun HTMLning style attributidan va CSSning background-img xususiyatidan foydalaniladi:

Elementga orqa fon rasm qo

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

Bundan tashqari, <head> qismida <style> elementi ichida berishingiz ham mumkin:

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

Sahifaning orqafon rasmi

Agar butun sahifaning orqafoniga rasm qo'yishni hohlsangiz, rasmni <body> elementiga berishingiz kerak:

Butun sahifa uchun orqafon rasm qo

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

W3Schools online HTML editor

Background repeat

Agar rasm elementdan kichik bo'lsa, u elementning ohiriga borguncha gorizontal va vertikal shaklda takrorlanaveradi.

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

W3Schools online HTML editor

Orqafon rasm takrorlanmasligi uchun background-repeat xususiyatiga no-repeat qiymatini bering.

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

W3Schools online HTML editor

Background cover

Agar orqafon rasmi butun elementni qamrab olishini istasangiz, background-size xususiyatiga cover qiymatini berishingiz mumkin.

Bundan tashqari, butun element har doim qamrab olingan holatda ekanligiga ishonchingiz komil bo'lishi uchun background-attachmentxususiyatiga fixed qiymatini bering.

Shunday qilib, orqafon rasmi cho'ziln ketmasdan butun elementni qamrab oladi (rasm asl holatini saqlab qoladi):

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

W3Schools online HTML editor

Background Stretch

Agar fon rasmi butun elementga mos turishini xohlasangiz, background-size xususiyatiga 100% 100% qiymatlarini berishingiz mumkin.

Brauzer oynasining o'lchamini o'zgartirib ko'ring va rasmning cho'zilayotganiga guvoh bo'lasiz, lekin u har doim butun elementni qamrab turadi.

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

W3Schools online HTML editor