CSS background-attachment property

By /

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

ব্যাকগ্রাউন্ড-অ্যাটাচমেন্ট প্রপার্টি ব্যবহার করা হয় যে ব্যাকগ্রাউন্ড ইমেজ ঠিক করা হয়েছে বা ব্রাউজার উইন্ডোতে বাকি পৃষ্ঠার সাথে স্ক্রোল করুন।

এই সম্পত্তির তিনটি মান আছে স্ক্রোল, স্থির এবং স্থানীয়। এর ডিফল্ট মান হল স্ক্রোল, যার কারণে উপাদানটি তার বিষয়বস্তুর সাথে স্ক্রোল করে না। এই সম্পত্তির স্থানীয় মান উপাদানের সাথে স্ক্রোল করার কারণ। যদি আমরা মানটিকে স্থির হিসাবে সেট করি, তবে ব্রাউজারে স্ক্রল করার সময় পটভূমি চিত্রটি সরবে না।

এই CSS বৈশিষ্ট্য একাধিক ব্যাকগ্রাউন্ড ইমেজ সমর্থন করতে পারে. আমরা প্রতিটি ব্যাকগ্রাউন্ড-ইমেজের জন্য ব্যাকগ্রাউন্ড-সংযুক্তি সম্পত্তির একটি ভিন্ন মান নির্দিষ্ট করতে পারি, কমা দিয়ে আলাদা করে। প্রতিটি ছবি এই সম্পত্তির সংশ্লিষ্ট মানের সাথে মিলবে।

বাক্য গঠন:

  1. background-attachment: scroll | fixed | local | initial | inherit;  

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

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

স্ক্রোল: এটি ডিফল্ট মান যা উপাদানটিকে বিষয়বস্তুর সাথে স্ক্রোল করা থেকে বাধা দেয়, কিন্তু পৃষ্ঠার সাথে স্ক্রল করে।

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

স্থানীয়: এই মান ব্যবহার করে, যদি উপাদানটির একটি স্ক্রলিং প্রক্রিয়া থাকে, তাহলে পটভূমি চিত্রটি উপাদানটির বিষয়বস্তুর সাথে স্ক্রোল করে।

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

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

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

উদাহরণ:

এই উদাহরণে, আমরা ব্যাকগ্রাউন্ড-সংযুক্তি সম্পত্তির স্ক্রোল মান ব্যবহার করছি, যা ডিফল্ট আচরণ। সুতরাং যখন পৃষ্ঠাটি স্ক্রোল করা হয়, তখন পটভূমি এটির সাথে স্ক্রোল করে।

  1. <!DOCTYPE html>  
  2. </html>  
  3. <head>  
  4. <title>  
  5. background-attachment property  
  6. </title>  
  7.   
  8. <style>  
  9. #example {  
  10. background-image:  url(“lion.png”);  
  11. font-size: 35px;  
  12. border: 4px solid red;  
  13. color: white;  
  14. background-position: center;  
  15. background-color: green;      
  16. background-repeat: no-repeat;  
  17. background-attachment: scroll;  
  18. }  
  19.   
  20. </style>  
  21. </head>  
  22.   
  23. <body>  
  24. <h1> background-attachment: scroll;</h1>  
  25. <p> If there is no scrollbar on your screen, then try to resize the browser’s window to see the effect. </p>  
  26. <div id=“example”>  
  27. <p>  
  28. Hi, Welcome to the javaTpoint.com. This site is developed so that students may learn computer science related technologies easily. The javaTpoint.com is always providing an easy and in-depth tutorial on various technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better.  
  29. </p>  
  30. </div>  
  31.   
  32. </body>  
  33. </html>  

উদাহরণ – নির্দিষ্ট মান ব্যবহার করা:

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

  1. <!DOCTYPE html>  
  2. </html>  
  3. <head>  
  4. <title>  
  5. background-attachment property  
  6. </title>  
  7.   
  8. <style>  
  9. #example {  
  10. background-image:  url(“lion.png”);  
  11. font-size: 35px;  
  12. border: 4px solid red;  
  13. color: white;  
  14. background-position: center;  
  15. background-color: green;      
  16. background-repeat: no-repeat;  
  17. background-attachment: fixed;  
  18. }  
  19.   
  20. </style>  
  21. </head>  
  22.   
  23. <body>  
  24. <h1> background-attachment: fixed;</h1>  
  25. <p> If there is no scrollbar on your screen, then try to resize the browser’s window to see the effect. </p>  
  26. <div id=“example”>  
  27. <p>  
  28. Hi, Welcome to the javaTpoint.com. This site is developed so that students may learn computer science related technologies easily. The javaTpoint.com is always providing an easy and in-depth tutorial on various technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better.  
  29. </p>  
  30. </div>  
  31.   
  32. </body>  
  33. </html>  

উদাহরণ – স্থানীয় মান ব্যবহার করা:

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

  1. <!DOCTYPE html>  
  2. </html>  
  3. <head>  
  4. <title>  
  5. background-attachment property  
  6. </title>  
  7.   
  8. <style>  
  9. #example {  
  10. background-image:  url(“lion.png”);  
  11. font-size: 35px;  
  12. border: 4px solid red;  
  13. color: white;  
  14. background-position: center;  
  15. background-color: green;      
  16. background-repeat: no-repeat;  
  17. background-attachment: local;  
  18. }  
  19.   
  20. </style>  
  21. </head>  
  22.   
  23. <body>  
  24. <h1> background-attachment: local;</h1>  
  25. <p> If there is no scrollbar on your screen, then try to resize the browser’s window to see the effect. </p>  
  26. <div id=“example”>  
  27. <p>  
  28. Hi, Welcome to the javaTpoint.com. This site is developed so that students may learn computer science related technologies easily. The javaTpoint.com is always providing an easy and in-depth tutorial on various technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better.  
  29. </p>  
  30. </div>  
  31.   
  32. </body>  
  33. </html>  

এখন, আরেকটি উদাহরণ দেখা যাক যেখানে আমরা একটি উপাদানের জন্য একাধিক ব্যাকগ্রাউন্ড ইমেজ ব্যবহার করছি।

উদাহরণ:

এখানে, দুটি ব্যাকগ্রাউন্ড ইমেজ আছে যার উপর আমরা ব্যাকগ্রাউন্ড-অ্যাটাচমেন্ট প্রপার্টি প্রয়োগ করছি। প্রথম চিত্রের সংযুক্তিটি স্থির অবস্থায় সেট করা হয়েছে, যেখানে দ্বিতীয় চিত্রটির সংযুক্তিটি স্ক্রোল করার জন্য সেট করা হয়েছে৷

  1. <!DOCTYPE html>  
  2. </html>  
  3. <head>  
  4. <title>  
  5. background-attachment property  
  6. </title>  
  7.   
  8. <style>  
  9. #example {  
  10. background-image:  url(“jtp.png”), url(“forest.jpg”);  
  11. height: 500px;  
  12. border: 4px solid red;  
  13. background-position: center;  
  14. background-repeat: no-repeat;  
  15. background-attachment: fixed, scroll;  
  16. }  
  17.   
  18. </style>  
  19. </head>  
  20.   
  21. <body>  
  22. <h1> background-attachment: scroll;</h1>  
  23. <p> If there is no scrollbar on your screen, then try to resize the browser’s window to see the effect. </p>  
  24. <div id=“example”>  
  25. </div>  
  26. </body>  
  27. </html>  


Leave a Comment

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

Scroll to Top