Definition and Usage
If a background-image is specified, the background-attachment CSS property determines whether that image's position is fixed within the viewport, or scrolls along with its containing block.
- Initial scroll
- Applies to all elements
- Inherited no
- Media visual
- Computed Value as specified
- Animatable no
- Canonical order the unique non-ambiguous order defined by the formal grammar
Syntax
Formal syntax: <attachment>#
background-attachment: scroll
background-attachment: fixed
background-attachment: local
background-attachment: inherit
Values
- scroll
- This keyword means that the background image will scroll within the viewport along with the block the image is contained within.
- fixed
- This keyword means that the background image will not scroll with its containing element, instead remaining stationary within the viewport.
- local
- This keyword means that the background image will not scroll with its containing element, but will scroll when the element's content scrolls: it is fixed regarding the element's content.
Examples
body {
background-image: url("images/cartooncat.png");
background-attachment: fixed;
}
Multiple background image support
This property supports multiple background images. You can specify a different <attachment> for each background, separated by commas:
body {
background-image: url("img1.png"), url("img2.png");
background-attachment: scroll, fixed;
}
Each image is matched with the corresponding attachment type, from first specified to last.
Compatibility
Desktop browsers
Feature |
Chrome |
Firefox (Gecko) |
Internet Explorer |
Opera |
Safari |
Basic support |
1.0 |
1.0 (1.7 or earlier) |
4.0 |
3.5 |
1.0 |
Multiple backgrounds |
1.0 |
3.6 (1.9.2) |
9.0 |
10.5 |
1.3 |
local |
4.0 |
25.0 (25) |
9.0 |
10.5 |
5.0 |
Mobile browsers
Feature |
Android |
Firefox Mobile (Gecko) |
IE Phone |
Opera Mobile |
Safari Mobile |
Basic support |
2.1 |
1.0 (1.9.2) |
NA |
10.0 |
3.2 |
Multiple backgrounds |
2.1 |
1.0 (1.9.2) |
NA |
10.0 |
3.2 |
local |
NA |
25.0 (25) |
NA |
NA |
NA |