background-attachment (CSS property)
| IE5.5+ | FF1+ | Saf1.3+ | Op9.2+ |
|---|---|---|---|
| Buggy | Full | Full | Full |
| Inherited | Initial | Version |
|---|---|---|
| No | scroll |
CSS1, 2.1 |
Example
This style rule sets a
fixed background-image to the
element with ID "example":
#example{
background-attachment: fixed;
}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
| IE | 5.5 | Buggy |
|---|---|---|
| 6.0 | Buggy | |
| 7.0 | Buggy | |
| Firefox | 1.0 | Full |
| 1.5 | Full | |
| 2.0 | Full | |
| Safari | 1.3 | Full |
| 2.0 | Full | |
| 3.0 | Full | |
| Opera | 9.2 | Full |
| 9.5 | Full |
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-position 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.
Related Reading
User-contributed notes
- ID:
- #2
- Date:
- Fri, 07 Mar 2008 00:34:35 GMT
- Status:
- This note has not yet been confirmed for accuracy and relevance.
Typo: "When a background-position value of fixed is applied..."
Fix:
"background-position" should be "background-attachment"
Add a note
To post a note on this topic, please log in with your SitePoint username and password. If you don't have an account yet, you can create a new account for free.
