This page is Ready to Use

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.

background-attachment

Summary

Defines if a background image scrolls with the content or stays fixed.

Overview table

Initial value
scroll
Applies to
All elements
Inherited
No
Media
visual
Computed value
as specified
Animatable
No
CSS Object Model Property
scroll
Percentages
n/a

Syntax

  • background-attachment: fixed
  • background-attachment: local
  • background-attachment: scroll

Values

scroll
Default. Background image scrolls with the object as the document is scrolled.
fixed
Background image stays fixed within the viewport and does not move when the element or the page is scrolled.
local
Background image stays fixed with regard to the element’s contents and scrolls as the element is scrolled.

Examples

The following examples use the background-attachment attribute and the background-attachment property to set the background to "fixed", so that the background does not scroll with the text.

This example uses an inline style sheet to set the background to fixed.

<style >
    body { background-attachment:fixed }
</style>
</head>
<body background="some.jpg">

View live example

This example uses scripting to set the page background to fixed.

document.body.backgroundAttachment = 'fixed';

Notes

Remarks

This property can be set with the other background properties by using the background composite property.

With CSS3 Backgrounds, the background of a box can have multiple layers. The number of layers is determined by the number of comma-separated values in the background-image property. Each of the images is sized, positioned, and tiled according to the corresponding value in the other background properties (background-attachment, background-clip, background-origin, background-position, background-repeat, and background-size). The first image in the list is the layer closest to the user, the next one is painted behind the first, and so on.

Related specifications

CSS 2.1
W3C Recommendation
CSS Backgrounds and Borders Module Level 3
W3C Candidate Recommendation

See also

Related articles

Background

Related pages

Attributions