Background Attachment in CSS

CSS Web Development Front End Technology

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 −

Live Demo

<!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

Live Demo

<!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>