CSS Background Attachment
We will be seeing different HTML CSS background attachment that we can use in web development.
Photo by Martin Sanchez on Unsplash
Table of contents
The background-attachment property is used to specify that the background image is fixed or scroll with the rest of the page in the browser window.
This property has three values scroll, fixed, and local. Its default value is scroll, which causes the element to not scroll with its content. The local value of this property causes the element to scroll with the content. If we set the value to fixed, the background image will not move during scrolling in the browser.
This CSS property can support multiple background images. We can specify a different value of the background-attachment property for each background-image, separated by commas. Every image will match with the corresponding value of this property.
Syntax
background-attachment: scroll | fixed | local | initial | inherit;
Property Values
The background-attachment property in the CSS determines if a background picture will move with the content or stay still. It may accept any of the subsequent values. It can take one of the following values:
1. Scroll: This is the setting by default. When the user scrolls down the page, the background image will move along with the information.
background-attachment: scroll;
2. Fixed: No matter how far the user scrolls, the background picture will stay fixed in the position. The backdrop effect becomes "fixed" as a result.
background-attachment: fixed;
3. Local: The background picture will not scroll with the page but rather with the contents of the element. When utilizing background pictures on the elements that have a fixed size, such as an element with a specified height and the overflow set to scroll, this will become more pertinent.
background-attachment: local;
4. Initial: Returns the property's initial value to it.
background-attachment: initial;
5. Inherit: Inherited from its parent element at the first instance.
background-attachment: inherit;
EXAMPLE
<!DOCTYPE html>
<html>
<head>
<title>
background-attachment property
</title>
<style>
#background{
background-image: url("lion.png");
font-size: 35px;
border: 4px solid red;
color: white;
background-position: center;
background-color: green;
background-repeat: no-repeat;
background-attachment: scroll;
}
</style>
</head>
<body>
<h1> background-attachment: scroll;</h1>
<p> If there is no scrollbar on your screen, then try to resize the browser's window to see the effect. </p>
<div id="background">
<p> Hi, Welcome to the My page here you will find many new things for HTML, CSS, JS for web development. Here i am uploading all the things regarding web development from starting. <br>
We are going to see many new things regarding web develeopment. These things will help you to make your website very attractive and eyecatching.
Follow for more such content.</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>
background-attachment property
</title>
<style>
#background{
background-image: url("lion.png");
font-size: 35px;
border: 4px solid red;
color: white;
background-position: center;
background-color: green;
background-repeat: no-repeat;
background-attachment: fixed;
}
</style>
</head>
<body>
<h1> background-attachment: fixed;</h1>
<p> If there is no scrollbar on your screen, then try to resize the browser's window to see the effect. </p>
<div id="background">
<p>
Hi, Welcome to the My page here you will find many new things for HTML, CSS, JS for web development. Here i am uploading all the things regarding web development from starting. <br>
We are going to see many new things regarding web develeopment. These things will help you to make your website very attractive and eyecatching.
Follow for more such content.
</p>
</div>
</body>
</html>
Here if i will add more content then also the image will not move.
