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>
आउटपुट
यह निम्नलिखित आउटपुट देता है:
स्क्रॉल करने पर, हमें निम्नलिखित आउटपुट मिलता है:
