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: fixed;
Output: fixed background image is displayed.