The CSS background-attachment property is used to define if the background-image is fixed, or it will scroll along with the rest of the page. It is one of the CSS3 properties.
- The Background-attachment property includes the following values.
- scroll
- fixed
- local
- initial
- inherit
Background-attachment Characteristics:
| Initial value | scroll |
| Applies to | All elements. It also applies to ::first-letter and ::first-line |
| Inherited | No |
| Animatable | No |
| Version | CSS1 |
| JavaScript syntax | object.style.backgroundAttachment = "scroll"; |
Syntax:
background-attachment: scroll | fixed | local | initial | inherit;
Values:
| Value | Description |
|---|---|
| scroll | It is a default value. This value makes the background image scroll along with the element. |
| fixed | This value will fix the background image. |
| local | It will scroll the background image along with the element's contents. |
| initial | This will set the property to its default value. |
| inherit | Inherits the property from its parent element. |
Example of Background-attachment property:
In the following code, we use background-attachment property with scroll value. Thus, the background image scrolls with the page.
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
body {
background-image: url("https://sharepointanchor.com/wp-content/uploads/2021/02/Flat-Mountains.png");
background-repeat: no-repeat;
background-attachment: scroll;
background-size: 500px 100px;
}
</style>
</head>
<body>
<h2>Background-attachment Example</h2>
<p>The background-image scrolls with the page. Try to scroll down.</p>
<p>The background-image scrolls with the page. Try to scroll down.</p>
<p>The background-image scrolls with the page. Try to scroll down.</p>
<p>The background-image scrolls with the page. Try to scroll down.</p>
<p>The background-image scrolls with the page. Try to scroll down.</p>
<p>The background-image scrolls with the page. Try to scroll down.</p>
<p>The background-image scrolls with the page. Try to scroll down.</p>
<p>The background-image scrolls with the page. Try to scroll down.</p>
<p>The background-image scrolls with the page. Try to scroll down.</p>
<p>The background-image scrolls with the page. Try to scroll down.</p>
<p>The background-image scrolls with the page. Try to scroll down.</p>
<p>The background-image scrolls with the page. Try to scroll down.</p>
<p>The background-image scrolls with the page. Try to scroll down.</p>
<p>The background-image scrolls with the page. Try to scroll down.</p>
<p>The background-image scrolls with the page. Try to scroll down.</p>
<p>The background-image scrolls with the page. Try to scroll down.</p>
<p>The background-image scrolls with the page. Try to scroll down.</p>
<p>The background-image scrolls with the page. Try to scroll down.</p>
<p>The background-image scrolls with the page. Try to scroll down.</p>
<p>The background-image scrolls with the page. Try to scroll down.</p>
<p>The background-image scrolls with the page. Try to scroll down.</p>
<p>The background-image scrolls with the page. Try to scroll down.</p>
<p>The background-image scrolls with the page. Try to scroll down.</p>
<p>The background-image scrolls with the page. Try to scroll down.</p>
<p>The background-image scrolls with the page. Try to scroll down.</p>
<p>The background-image scrolls with the page. Try to scroll down.</p>
<p>The background-image scrolls with the page. Try to scroll down.</p>
<p>The background-image scrolls with the page. Try to scroll down.</p>
<p>The background-image scrolls with the page. Try to scroll down.</p>
<p>The background-image scrolls with the page. Try to scroll down.</p>
<p>If you do not see any scrollbars, try to resize the browser window.</p>
</body>
</html>
Result:
By running the above code, you will get the output as shown as below.
Example of the background-attachment property with the fixed value:
In the below code, the background image is "fixed", so it will not move with the page.
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
body {
background-image: url("https://sharepointanchor.com/wp-content/uploads/2021/02/Flat-Mountains.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 500px 100px;
}
</style>
</head>
<body>
<h2>Background-attachment example</h2>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>If you do not see any scrollbars, try to resize the browser window.</p>
</body>
</html>
Result:
Now, you will see the result as shown in the below image.
Example of the background-attachment property with a disappearing fixed background image:
This code will disappear the fixed background image.
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
.example {
background-image: url("https://sharepointanchor.com/wp-content/uploads/2021/02/Flat-Mountains.png");
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
</head>
<body>
<h2>Background-attachment example</h2>
<p> Scroll the page to see the effect. </p>
<div class="example"></div>
<div style="height:800px;background-color:#FD8D8B;"></div>
</body>
</html>
Result:
You will get the result of the above code as shown in the below image.
Browser-Support:
The post CSS background-attachment Property appeared first on Share Point Anchor.
Top comments (0)