CSS background-size property

By /

CSS ব্যাকগ্রাউন্ড-আকার সম্পত্তি:

ব্যাকগ্রাউন্ড-সাইজ সিএসএস প্রপার্টি ব্যবহার করা হয় একটি এলিমেন্টের ব্যাকগ্রাউন্ড ইমেজের সাইজ সেট করতে। ব্যাকগ্রাউন্ড ইমেজ বিদ্যমান স্পেসে ফিট করার জন্য প্রসারিত বা সীমাবদ্ধ করা যেতে পারে। এটি আমাদের ব্যাকগ্রাউন্ড ইমেজের স্কেলিং নিয়ন্ত্রণ করতে দেয়।

এই বৈশিষ্ট্যটি দৈর্ঘ্য, শতাংশ বা কীওয়ার্ড মান ব্যবহার করে সংজ্ঞায়িত করা যেতে পারে। এটিতে দুটি সম্ভাব্য কীওয়ার্ড মান রয়েছে যা ধারণ এবং কভার। এর একক-মান সিনট্যাক্স চিত্রের প্রস্থকে সংজ্ঞায়িত করে (এই ক্ষেত্রে, উচ্চতা স্বয়ংক্রিয়ভাবে সেট করে), যেখানে দ্বৈত মান উচ্চতা এবং প্রস্থ উভয়ের মানকে সংজ্ঞায়িত করে যেখানে প্রথম মানটি প্রস্থ নির্ধারণ করে এবং দ্বিতীয়টি উচ্চতা নির্ধারণ করে।

যদি একটি উপাদানের একাধিক ব্যাকগ্রাউন্ড ইমেজ থাকে, তাহলে আমরা প্রতিটির বিভিন্ন আকার নির্ধারণ করতে কমা দ্বারা পৃথক করা মানগুলিকে সংজ্ঞায়িত করতে পারি।

ব্যাকগ্রাউন্ড-আকার সম্পত্তির কভার মান উপাদানটির সমগ্র পটভূমি এলাকা কভার করতে ব্যবহৃত হয়। বিপরীতে, এই সম্পত্তির ধারণ মান চিত্রটিকে ক্লিপ না করে যতটা সম্ভব চিত্রকে স্কেল করে।

বাক্য গঠন:

  1. background-size: auto | length | cover | contain | initial | inherit;  

এই সম্পত্তির মান নিম্নরূপ সংজ্ঞায়িত করা হয়.

সম্পত্তি মান:

স্বয়ংক্রিয়: এটি ডিফল্ট মান, যা পটভূমি চিত্রটিকে তার আসল আকারে প্রদর্শন করে।

দৈর্ঘ্য: এটি ব্যাকগ্রাউন্ড ইমেজের প্রস্থ এবং উচ্চতা সেট করতে ব্যবহৃত হয়। এই মানটি প্রদত্ত দৈর্ঘ্যের সংশ্লিষ্ট মাত্রায় চিত্রটিকে প্রসারিত করে। এর একক মান চিত্রের প্রস্থকে নির্দিষ্ট করে এবং উচ্চতা স্বয়ংক্রিয়ভাবে সেট করে। যদি দুটি মান দেওয়া হয়, প্রথম মানটি প্রস্থ নির্ধারণ করে এবং দ্বিতীয় মানটি উচ্চতা নির্ধারণ করে। এটা নেতিবাচক মান অনুমতি দেয় না.

শতাংশ: এই মানটি ব্যাকগ্রাউন্ড চিত্রের প্রস্থ এবং উচ্চতাকে ব্যাকগ্রাউন্ড পজিশনিং এলাকার শতাংশ (%) এর সাথে সংজ্ঞায়িত করে। নেতিবাচক মান অনুমোদিত নয়।

কভার: পুরো ধারকটিকে কভার করতে এই মানটি ব্যাকগ্রাউন্ড ইমেজের আকার পরিবর্তন করতে ব্যবহৃত হয়। কখনও কখনও, এটি প্রান্তগুলির একটি থেকে সামান্য কাটে বা চিত্রটিকে প্রসারিত করে। উপাদানটি সম্পূর্ণরূপে আচ্ছাদিত হয়েছে তা নিশ্চিত করতে এটি চিত্রটির আকার পরিবর্তন করে।

ধারণ করে: প্রসারিত বা ক্রপ না করে, এটি পটভূমি চিত্রটির আকার পরিবর্তন করে যাতে ছবিটি সম্পূর্ণরূপে দৃশ্যমান হয়।

প্রাথমিক: এটি সম্পত্তিটিকে তার ডিফল্ট মান নির্ধারণ করে।

inherit: এটি তার মূল উপাদান থেকে সম্পত্তি উত্তরাধিকারসূত্রে পায়।

আসুন কিছু ইলাস্ট্রেশন ব্যবহার করে এই CSS প্রপার্টি বুঝতে পারি।

উদাহরণ:

এই উদাহরণে, 300px প্রস্থ এবং 200px উচ্চতা সহ তিনটি div উপাদান রয়েছে৷ প্রতিটি div উপাদানের একটি ব্যাকগ্রাউন্ড-ইমেজ রয়েছে যার উপর আমরা ব্যাকগ্রাউন্ড-আকারের বৈশিষ্ট্য প্রয়োগ করছি।

এখানে আমরা div উপাদানের ব্যাকগ্রাউন্ড-আকার সেট করতে দৈর্ঘ্য এবং শতাংশের মান ব্যবহার করছি। প্রথম ডাইভ এলিমেন্টের ব্যাকগ্রাউন্ড সাইজ স্বয়ংক্রিয়ভাবে সেট করা হয়েছে, দ্বিতীয় ডিভ এলিমেন্ট 150px 150px এ সেট করা হয়েছে এবং তৃতীয় ডাইভ এলিমেন্টের পটভূমির সাইজ 30% এ সেট করা হয়েছে।

  1. >  
  2. html>  
  3. <head>  
  4. <title>  
  5. background-size property  
  6. title>  
  7. <style>  
  8. div {  
  9. width: 300px;  
  10. height: 200px;  
  11. border: 2px solid red;  
  12. }  
  13. #div1{  
  14. background-image: url(‘lion.png’);  
  15. background-size: auto;  
  16. }  
  17. #div2{  
  18. background-image: url(‘lion.png’);  
  19. background-size: 150px 150px;  
  20. }  
  21. #div3{  
  22. background-image: url(‘lion.png’);  
  23. background-size: 30%;  
  24. }  
  25. style>  
  26. head>  
  27.   
  28. <body>  
  29. <h2> background-size: auto; h2>  
  30. <div id = “div1”>div>  
  31. <h2> background-size: 150px 150px; h2>  
  32. <div id = “div2”>div>  
  33. <h2> background-size: 30%; h2>  
  34. <div id = “div3”>div>  
  35. body>  
  36. html>  

এখন, পরবর্তী উদাহরণে, আমরা ব্যাকগ্রাউন্ড-সাইজ প্রপার্টির কভার, কন্টেন এবং প্রাথমিক মান ব্যবহার করছি।

উদাহরণ:

  1. >  
  2. html>  
  3. <head>  
  4. <title>  
  5. background-size property  
  6. title>  
  7. <style>  
  8. div {  
  9. width: 300px;  
  10. height: 250px;  
  11. border: 2px solid red;  
  12. background-repeat: no-repeat;  
  13. }  
  14. #div1{  
  15. background-image: url(‘lion.png’);  
  16. background-size: contain;  
  17. }  
  18. #div2{  
  19. background-image: url(‘lion.png’);  
  20. background-size: cover;  
  21. }  
  22. #div3{  
  23. background-image: url(‘lion.png’);  
  24. background-size: initial;  
  25. }  
  26. style>  
  27. head>  
  28.   
  29. <body>  
  30. <h2> background-size: contain; h2>  
  31. <div id = “div1”>div>  
  32. <h2> background-size: cover; h2>  
  33. <div id = “div2”>div>  
  34. <h2> background-size: initial; h2>  
  35. <div id = “div3”>div>  
  36. body>  
  37. html>  

উদাহরণ – একাধিক ছবি একত্রিত করা:

আমরা এই সম্পত্তির মানগুলিও একত্রিত করতে পারি এবং সেগুলিকে একাধিক ছবিতে প্রয়োগ করতে পারি। এটি কমা-বিচ্ছিন্ন সিনট্যাক্স দ্বারা করা যেতে পারে।

এই উদাহরণে, তিনটি ডিভ উপাদান রয়েছে, প্রতিটিতে দুটি পটভূমি-চিত্র রয়েছে। এখন, আমরা উভয় ছবিতে ব্যাকগ্রাউন্ড-আকারের বৈশিষ্ট্য প্রয়োগ করছি।

  1. >  
  2. html>  
  3. <head>  
  4. <title>  
  5. background-size property  
  6. title>  
  7. <style>  
  8. div {  
  9. width: 250px;  
  10. height: 250px;  
  11. border: 2px solid red;  
  12. background-repeat: no-repeat;  
  13. background-position: center;  
  14. }  
  15. #div1{  
  16. background-image: url(‘lion.png’), url(‘forest.jpg’);  
  17. background-size: 300px 150px, cover;  
  18. }  
  19. #div2{  
  20. background-image: url(‘lion.png’), url(‘forest.jpg’);  
  21. background-size: 200px 150px, 300px 200px;  
  22. }  
  23. #div3{  
  24. background-image: url(‘lion.png’), url(‘forest.jpg’);  
  25. background-size: 150px 175px, contain;  
  26. }  
  27. style>  
  28. head>  
  29.   
  30. <body>  
  31. <h2> background-size: 300px 150px, cover; h2>  
  32. <div id = “div1”>div>  
  33. <h2> background-size: 200px 150px, 300px 200px; h2>  
  34. <div id = “div2”>div>  
  35. <h2> background-size: 150px 175px, contain; h2>  
  36. <div id = “div3”>div>  
  37.   
  38. body>  
  39. html>  


Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top