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
Formal syntax: <attachment>#
- This keyword means that the background image will scroll within the viewport along with the block the image is contained within.
- This keyword means that the background image will not scroll with its containing element, instead remaining stationary within the viewport.
- 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.
Multiple background image support
This property supports multiple background images. You can specify a different <attachment> for each background, separated by commas:
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.
|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|
|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|