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 9 months ago