The background-attachment property in CSS is used to specify the position of background image when the page is scrolled with respect to the viewport. It can have the values scroll, fixed and local.
Syntax
The syntax of CSS background-attachment property is as follows −
Selector {
background-attachment: /*value*/
}Example
The following examples illustrate CSS background-attachment property −
<!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>Output
This gives the following output −
On scrolling, we get the following output −
Example
<!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>Output
This gives the following output −
On scrolling, we get the following output −
