CSS দিয়ে ব্যাকগ্রাউন্ড ইমেজকে রেসপন্সিভ করুন

ব্যাকগ্রাউন্ড ইমেজকে রেসপন্সিভ করতে background-size: contain বা cover ব্যবহার করা হয়, যাতে ইমেজ কন্টেইনারের আকার অনুযায়ী স্কেল হয়।

উদাহরণ

নিচের কোডটি চালিয়ে রেসপন্সিভ ব্যাকগ্রাউন্ড ইমেজের উদাহরণ দেখুন:

<!DOCTYPE html> <html> 
  <head> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <style> 
      div { 
        width: 100%; 
        height: 300px; 
        border: 2px dashed blue; 
        background-image: url('https://www.tutorialspoint.com/python/images/python-data-science.jpg'); 
        background-repeat: no-repeat; 
        background-size: contain; 
      } 
    </style> 
  </head> 
  <body> 
    <p>To check the effect, you need to resize the browser.</p> 
    <div></div> 
  </body> 
</html>

ব্যাখ্যা: background-size: contain ইমেজকে অ্যাসপেক্ট রেশিও রক্ষা করে কন্টেইনারের মধ্যে পুরো দেখানোর জন্য স্কেল করে। cover ব্যবহার করলে ইমেজ কন্টেইনারকে পুরো কভার করবে (ক্রপ হতে পারে)। background-repeat: no-repeat রিপিট বন্ধ করে।