background-attachment

Summary

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 value scroll
• Applies to all elements
• Inherited no
• Media visual
• Computed value as specified

Syntax

background-attachment:  http://i9.glitter-graphics.org/pub/48/48169s2581xo4hz.gif[, attachment]*

where:

attachment

Is a keyword that can have one of the following values:

• scroll, meaning that the background image will scroll within the viewport along with the block the image is contained within.
• fixed, meaning that the background image will not scroll with its containing element, instead remaining stationary within the viewport.
• local, meaning 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

View the live example

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.

Specifications

Browser compatibility

See also

• Background-related CSS properties: background, background-attachment, background-clip, background-color, background-image, background-origin, background-position, background-repeat, background-size
• Multiple backgrounds