CSS background-attachment Property
The background-attachment property defines if the background-image is fixed or it will scroll along with the rest of the page.
Background-attachment has three values: fixed, scroll, and local. When the "scroll" value is set, the background-image will scroll with the page. This is the default value.
When the "fixed" value is applied, the background-image will remain fixed to the viewport. Even if an element has a scrolling mechanism, the background doesn't move with the page.
When the local value is set, the background-image will scroll with the element's contents.
| Initial Value | scroll |
| Applies to | All elements. It also applies to ::first-letter and ::first-line. |
| Inherited | No. |
| Animatable | No. |
| Version | CSS1 |
| DOM Syntax | object.style.backgroundAttachment = "scroll"; |
Syntax¶
background-attachment: scroll | fixed | local | initial | inherit;Example of the background-attachment property: ¶
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
body {
background-image: url("/build/images/web-logo-black.png");
background-repeat: no-repeat;
background-attachment: scroll;
background-size: 400px 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>In the following example, the background-image is "fixed" and does not move with the page.
Example of the background-attachment property with the "fixed" value: ¶
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
body {
background-image: url("/build/images/web-logo-black.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 400px 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>Example of the background-attachment property with a disappearing fixed background image: ¶
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
.example {
background-image: url("/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg");
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:#1c87c9;"></div>
</body>
</html>Values¶
| Value | Description |
|---|---|
| scroll | Makes the background image scroll along with the element. This is the default value |
| fixed | Makes background fixed with regard to the viewport. |
| local | Makes background scroll along with the element's contents. |
| initial | Sets the property to its default value. |
| inherit | Inherits the property from its parent element. |
0 Comments
CAN FEEDBACK
Emoji