सीएसएस में बैकग्राउंड-अटैचमेंट प्रॉपर्टी का उपयोग व्यूपोर्ट के संबंध में पेज को स्क्रॉल करते समय बैकग्राउंड इमेज की स्थिति को निर्दिष्ट करने के लिए किया जाता है। इसमें मान स्क्रॉल, स्थिर और स्थानीय हो सकते हैं।
सिंटैक्स
CSS बैकग्राउंड-अटैचमेंट प्रॉपर्टी का सिंटैक्स इस प्रकार है -
Selector {
background-attachment: /*value*/
} उदाहरण
निम्नलिखित उदाहरण CSS बैकग्राउंड-अटैचमेंट प्रॉपर्टी को दर्शाते हैं -
<!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> आउटपुट
यह निम्न आउटपुट देता है -
स्क्रॉल करने पर, हमें निम्न आउटपुट मिलता है -
