Using CSS background-attachment property one can either fix the background image or can scroll it accordingly with the rest of the content.

 


For eg: If you have used an image in your background then normally the image will scroll with the page and its content , but if you have set this property to fixed then the image will stay in the same position.

You can also refer the below shown syntax by using which you can set up this property in different ways.

 


Background-attachment Syntax


background-attachment: scroll;   /* It will scroll along with the element (default )*/

background-attachment: fixed;    /* It will fix the background image  */

background-attachment: local;    /* The background scrolls along with the element's contents  */

background-attachment: initial;  /* Sets this property to its default value  */

background-attachment: inherit;  /* Inherits this property from its parent element  */


 


Below is our complete code with download and live demo option

 

 



CSS File: Style.css

The below given is a CSS file in which we have set the background-attachment property attribute to fixed.


div.demo{
background-image: url('images/mb.png');
background-repeat: no-repeat;
background-attachment: fixed;
}

 


As you have seen in live demo that the image is fixed in a certain place i.e. at the top-left corner of the screen and the rest of the content is scrollable. Do remember that scroll effect will only cause depending upon the content length.


 

HTML File: background-attachment.html

Its Plain HTML code where we have include the CSS  file shown above.


<html>
<title>background-clip<title>
<head>
<!-- Include CSS file here --!>
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div class="demo">
<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
</div>
</body>
</html>

 

Conclusion:

This way you can put images on background that can be made fixed or scroll with respect to content.

For more related stuffs check out the following listing –