• Post category:CSS

Background-attachment in CSS | Explained

Background-attachment in CSS

Learn about How we use background-attachment property in CSS.

Background Attachment

It is used to specify, how the background image is to be attached to the wall of we page. We can give a “scroll” or “fixed” value. By default background, and image attachment behavior will be scroll. This property lets you tell whether you want the background image to be scrolling or fixed. When you want the background to scroll, you should use the “background-attachment” property. Let’s see the example and get a clear idea.

Example:
CSS:

body{
background-image: url("nature.jpg");
background-repeat: no-repeat;
color: white;
background-size: cover;

}
p{
height: 300px;}

HTML:

<body><p>SECTION 1</p>
<p>SECTION 2</p>
<p>SECTION 3</p></body>

Output: The default value scroll is displayed.

background attachment in css

background-attachment: fixed;

Output: fixed background image is displayed.

background attachment in css

Leave a Reply