Description

The background-attachment property defines whether the background-image scrolls with the document, or remains fixed to the viewing area. Its default value is scroll, which dictates that as the document is scrolled up or down, the image scrolls with it.

The background of an element is the area covered by the width and height of that element (whether those dimensions are set explicitly, or the content dictates them); it also includes the area covered by padding and borders. A background-color (or background-image) that’s applied to an element will appear beneath the foreground content of that element, and the area covered by the padding and border properties for the element. This coverage area is evident where an element has transparent (or dotted or dashed) borders, and the background is seen beneath the borders (or between the dots). Note that Internet Explorer versions up to and including 6 don’t support transparent borders.

Value

The value scroll allows the background-image to scroll along with the document. When it’s used on an element that has a scrollbar—see overflow—the value scroll ensures that the background-image doesn’t move with that element’s scrolling mechanism, but instead scrolls with the document’s scrolling mechanism.

The value fixed stops the background-image from scrolling with its containing block. Note that although the fixed background-image may be applied to elements throughout the document, its background-position is always placed in relation to the viewport. This means the background-image is only visible when its background-position coincides with the content, padding, or border area of the element to which it is applied. Thus, a fixed background-image doesn’t move with elements that have a scrollbar—see overflow—because it’s placed in relation to the viewport.

Previously, user agents were allowed to treat the value fixed as scroll, but this changed in CSS2.1: if the user agent does not implement the value fixed, it should be ignored as if it were an invalid value.

Compatibility

Internet Explorer for Windows versions up to and including 6 incorrectly implement the value fixed for the property background-attachment and place the background-image in relation to its containing block instead of the viewport. The result is that fixed only really works when the background-image is applied to the html or body elements, since they’re effectively equivalent to the viewport. When a background-attachment value of fixed is applied to other elements on the page, it will fix the image to that element, not the viewport.

Internet Explorer version 7 implemented the scroll value incorrectly in cases where it’s used on a container that has a scroll mechanism—when overflow is set to a value other than visible. In such cases, the background-image scrolls with the content when it should in fact remain in view at the position specified. Internet Explorer versions 6 and below exhibit the same behavior as IE 7 in this respect; however, using the value fixed instead of scroll will cause IE versions 6 and below to exhibit the behavior defined in the specifications for scroll.

Internet Explorer for Windows versions up to and including 7 will only apply the background from inside the border’s edge when the element in question has a layout. If the element does not have a layout, the background-color or background-image will slide under the borders as per the specifications.

Internet Explorer for Windows versions up to and including 7 don’t support the value inherit.