CSS-এ background-attachment প্রপার্টি ব্যবহার করা হয় পেজ স্ক্রোল করার সময় ভিউপোর্ট সাপেক্ষে ব্যাকগ্রাউন্ড ইমেজের পজিশন নির্দিষ্ট করতে। এর মান হতে পারে scroll, fixed এবং local।
সিনট্যাক্স
CSS background-attachment প্রপার্টির সিনট্যাক্স নিচের মতো:
Selector { background-attachment: /*value*/ }
উদাহরণ
নিচের উদাহরণগুলো CSS background-attachment প্রপার্টি ব্যাখ্যা করে:
<!DOCTYPE html> <html> <head> <style> body { background-repeat: no-repeat; background-attachment: local; background-position: center; background-image: url("https://www.tutorialspoint.com/power_bi/images/power-bi-mini-logo.jpg"); } div { padding: 40px; margin: 30px; } .in { background: rgba(0,0,0,0.4); } </style> </head> <body> <div id="one"> <div class="in"></div> <div class="in"></div> <div class="in"></div> <div class="in"></div> <div class="in"></div> </div> </body> </html>
আউটপুট
উপরোক্ত কোডের আউটপুট:
স্ক্রোল করলে নিচের আউটপুট:
উদাহরণ
<!DOCTYPE html> <html> <head> <style> body { background-repeat: no-repeat; background-attachment: fixed; background-position: 10% 5%; background-image: url("https://www.tutorialspoint.com/power_bi/images/power-bi-mini-logo.jpg"); } div { padding: 80px; margin: 30px; border-radius: 4%; } .in { background: rgba(0,40,0,0.4); } </style> </head> <body> <div id="one"> <div class="in"></div> <div class="in"></div> <div class="in"></div> <div class="in"></div> <div class="in"></div> </div> </body> </html>
আউটপুট
উপরোক্ত কোডের আউটপুট:
স্ক্রোল করলে নিচের আউটপুট:
