background-attachment
The background-attachment property is used to specify whether a background image is fixed relative to the viewport, or scrolls along with the element or its content.
Multiple attachment keywords can be used when multiple background images are used. The values are then comma-separated, and each value is applied to a corresponding background image (first value for the first image, second value for the second image, and so on).
There is only one viewport in a view. And there is no viewport in paged media (print), so if an image is fixed, it is fixed with respect to the page box and therefore replicated on every page.
When an element’s background image is set to be fixed relative to the viewport, it will be fixed so that even if the element has scrollable content inside it (as in the examples below), the background will remain fixed and will not scroll with the element or its content.
Also, even if the image is fixed, it is still only visible when it is in the background painting area of the element or otherwise unclipped (see the background-repeat property for more information). Thus, unless the image is tiled, it may be invisible inside the element. A lot of websites use fixed images to create a nice scrolling effect on a page: the background image is fixed relative to the viewport, and it is first visible inside the element, and as soon as the user starts scrolling, the element scrolls up/down but the background image stays in its fixed position, so at some point, the element will reach a position where its background image is no longer visible inside of it, because it’s not in the element’s background painting area anymore. See the live demo below for an example.
Official Syntax
-
Syntax:
background-attachment: scroll | fixed | local
- Initial: scroll
- Applies To: all elements
- Animatable: no
Values
- scroll
- This is the default value. The background is fixed relative to the element itself and does not scroll with its content. It is effectively attached to the element’s border.
- fixed
-
The background is fixed relative to the viewport. In paged media where there is no viewport, a ‘fixed’ background is fixed with respect to the page box and therefore replicated on every page. Note that there is only one viewport per view. Even if an element has scrollable content, a ‘fixed’ background doesn’t move with the element or its content.
Even if the image is fixed, it is still only visible when it is in the background painting area of the element or otherwise unclipped. (See the background-repeat property for more information.) Thus, unless the image is tiled, it may be invisible inside the element. See the live demo below for an example.
- local
- The background is fixed relative to the element’s content: if the content inside the element is scrollable, the background scrolls with the element’s content.
Notes
If a browser does not support fixed backgrounds (for example, due to limitations of the hardware platform) it should ignore declarations with the keyword fixed. In that case, a background attachment is declared for non-supporting browsers, and then another declaration follows for browsers that do support it. You can see an example for this below.
Examples
The following example will fix the background image of an element relative to the viewport. A scroll attachment is declared first for browsers that don’t support the fixed value.
.element {
background-image: url(paper.png);
/* For non-supporting browsers */
background-attachment: scroll;
/* For browsers that do fixed backgrounds: */
background-attachment: fixed;
}
The following example will set two background images to an element (see background-image), and then it will fix one relative to the element, and the second one relative to the content so that it scrolls with the content.
.element {
background-image: url(path/to/my/image.jpg), url(path/to/second/image.png);
background-attachment: scroll, local;
}
This example creates an infinite vertical band that remains “glued” to the viewport when the element is scrolled.
body {
background-image: url("pendant.png");
background-repeat: repeat-y; /* repeat the image vertically only */
background-attachment: fixed;
}
Live Demo
View this demo on the Codrops Playground
For an example of the fixed background attachment value, check out this demo:
Browser Support
CSS background-attachment
Method of defining how a background image is attached to a scrollable element. Values include `scroll` (default), `fixed` and `local`.
W3C Candidate Recommendation
Supported from the following versions:
Desktop
- 4
- 25
- 9
- 10
- 5
Mobile / Tablet
- 5.0
- No
- No
- 66
- 60
Notes
Browser support for multiple background images varies. Please check the background-image entry for details.