• Kasblar
    • HTML
    CSS
    JavaScript
    PHP
    SQL
    Python
  • Bo'limlar
    • Yangiliklar
    Texnologiyalar
    Maqolalar

    Background Image

    Background  so'zi orqa fon deb tarjima qilinadi. Demak background image degani orqa fon rasm deb tarjima qilinadi.

    Har qanday  Html elementi uchun orqa fon ga rasm ishlatish mumkin.  

    Element orqa fon rasmi

    Namunada elementga orqa fon rasm yozilgan.

    <div style="background-image: url('https://picsum.photos/id/1002/200/300');">Ushbu so'zlar orqa qismida <br> rasm paydo bo'ladi</div>

    Natija

    Ushbu so'zlar orqa qismida
    rasm paydo bo'ladi

     

    Shuningdek html ning head  qismida  <style>  elementi orqali   orqa fon xususiyatini yozish mumkin.

    Namuna

    <!DOCTYPE html>
<html>
 <head>
   <style>
     div{
     background-image: url('https://picsum.photos/id/1002/200/300');
     }
   </style>  
 </head>   
 <body>
   <h1> Backgrount Image </h1>
   <div>Ushbu so'zlar orqa qismida <br> rasm paydo bo'ladi
   </div>
 </body>
</html>

    Natija

    Ushbu so'zlar orqa qismida
    rasm paydo bo'ladi

     

    Natijada barcha div elementlarga background-image xususiyati tasir qiladi va ularda orqa fonda rasm bo'ladi.

     <style>  elementi orqali .html faylda  Css kodlarni yozish mumkin. Ya'niy agar siz css kodlarni yozmoqchi  bo'lsangiz <style> elementi ichida yozishingiz kerak.

    Css bu umuman boshqa mavzu va siz hozircha bunga  ahamiyat bermang. Css haqida css darslarida to'liq ma'lumot olasiz.

     

    Saxifaning orqa fon rasmi

    Agar siz butun sahifaga  orqa fon rasmini yozmoqchi bo'lsangiz ,  <body>  elementida  orqa fon rasmini ko'rsatishingiz kerak.

    Namuna

        <style>
     body{
       background-image: url('https://picsum.photos/id/1003/200/300');
      }
   </style>

     

    Background Repeat 

    Repeat so'zi takrorlash deb tarjima qilinadi. Background repeat so'zi orqa fon rasmni takrorlanishini bildiradi.

    Agar fon rasmi elementdan kichikroq bo'lsa, u rasm gorizontal va vertikal ravishda elementning oxiriga qadar takrorlanadi. Ya'ni orqa fondagi rasm  elementdan kichik bo'sa rasm elementni takrorlanib orqa fon qismini egallab oladi.

    Namuna

    
<!DOCTYPE html>
<html>
  <head>
   <style>
     body{
     background-image: url('https://picsum.photos/id/1015/200/300');
     }
   </style>  
 </head>   
 <body>
   <h1> Backgrount Image </h1>
   <p>Body ya'ni saxifa juda katta rasm esa uni bittada egallab ola olmaydi</p>
   <p>Shu boisdan rasm body ni orqa fon qismini takrorlanish bilan egallab oladi.</p>
 </body>
</html>

     

    Div elementda yana bitta namuna.

    <!DOCTYPE html>
<html>
 <head>
   <style>
     div{
      width:450px;
      height:400px;
      background-image: url('https://picsum.photos/id/1025/200/300');
     }
   </style>  
 </head>   
 <body>
   <h1> Background Image </h1>
   <div>Div elementini orqa fon qismini egallab oladi.</div>
  
 </body>
</html>

     

    Background repeat

    Orqa fon rasmini takrorlanmasligi uchun ,  background-repeat   (orqa fon takrorlash) xususiyatini qiymatini takrorlanmaydigan qilib sozlash lozim.

    Buning uchun  background-repeat  xususiyatiga   no-repeat  qiymatini yozing. 

    Namuna

    <!DOCTYPE html>
<html>
 <head>
   <style>
     div{
      width:450px;
      height:400px;
      background-image: url('https://picsum.photos/id/1025/200/300');
      background-repeat: no-repeat; 
     }
   </style>  
 </head>   
 <body>
   <h1> Background Image </h1>
   <div>Div elementini background-image xususiyati yozilgan.</div>
   <p> 
     <b> background-repeat:</b> <i>no-repeat</i>  xususiyati rasmni takrorlanishini oldini oladi.     </p>
  
 </body>
</html>

     

    Natija

    Div elementini background-image xususiyati yozilgan.

     

    Background Cover

    Agar elementda orqa fon rasmi butun elementni qamrab olishini xohlasangiz,   background-size  xususiyatidan  foydalaning.

    Bunda  backgrount-size  xususiyatiga   cover  (qoplab olish) qiymatini yozing.

    Bundan tashqari, butun element har doim qoplanganligiga ishonch hosil qilish uchun, background-attachment xususiyatiga fixced qiymat yozing

    Namuna

    <!DOCTYPE html>
<html>
 <head>
   <style>
     div{
      width:450px;
      height:400px;
      background-image: url('https://picsum.photos/id/1025/200/300');
      background-repeat: no-repeat; 
      background-attachment: fixed;
      background-size: cover; 
     }
   </style>  
 </head>   
 <body>
   <h1> Background Image </h1>
   <div style="">
     <p>Div elementini background-image xususiyati yozilgan.</p>
   </div>
 </body>
</html>

     

    Natija 

    Div elementini background-image xususiyati yozilgan.

     

    Background Stretch 

    Stretch so'zi  cho'zish, kengaytirish deb tarjima qilinadi.  Background stretch deganda orqa fon rasmni butun bir elementga bo'ylab cho'zish tushiniladi.

    Agar siz orqa fon rasmini element bo'ylab cho'zilishini xohlasangiz    background-size  xususiyatiga quyidagicha qiymatlarni yozing  100% 100%.

    Brauzer oynasining o'lchamini o'zgartirishga harakat qiling, shunda siz rasmning cho'zilishini ko'rasiz va rasm har doim  butun elementni qamrab oladi.

    Namuna

    <!DOCTYPE html>
<html>
 <head>
   <style>
     body{
      background-image: url('https://picsum.photos/id/1021/200/300');
      background-repeat: no-repeat; 
      background-attachment: fixed;
      background-size: 100% 100%; 
     }
   </style>  
 </head>
 <body>
   <h1> Background Image </h1>
   <p> Body ga background image yozilgan. Undan tashqari <br> 
     <b> background-size: 100% 100%;</b>
   </p>
 </body>
</html>

     

    Yuqoridagi namunalarda, CSS fon xususiyatlaridan foydalanib, orqa  fon rasmlarini bo'yash mumkinligini bilib oldingiz.

    CSS-ning asosiy xususiyatlari haqida ko'proq bilish uchun bizning css bo'limimiz  bilan tanishib chiqing.