CSS Background Attachment Property
Last Updated Jul 21, 2015, 12:00:06 PM
CSS Background Attachment Property
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.
With the background-attachment property, we can determine whether or not the background image scrolls along with the containing element and content or if it stays fixed to the viewport area and never moves.
| Initial Value | scroll |
| Applies to | All elements. It also applies to ::first-letter and ::first-line |
| Inherited | no |
| Media | Visual |
| Computed Value | as specified |
| Animatable | no |
| Canonical order | The uniuqe non-ambiguous order defined by the formal grammer |
Syntax
Values
fixedThis keyword means that the background is fixed concerning the viewport. Even if an element has a scrolling mechanism, a ‘fixed’ background doesn't move with the element.
localThis keyword means that the background is fixed concerning the element's contents: if the element has a scrolling mechanism, the background scrolls with the element's contents, and the background painting area and background positioning area are relative to the scrollable area of the element rather than to the border framing them.
scrollThis keyword means that the background is fixed concerning the element itself and does not scroll with its contents. (It is effectively attached to the element's border.)
CSS Background Attachment Property Example
CSS introduced three different attachment properties such as scroll, fixed and local
Scroll
The background image scrolls within its containing element, so it moves up and down the page along with everything else.
Try It Now
when the page is scrolled the background image also scrolls along with the content.
Fixed
The value "fixed" keeps the image fixed to the viewport so that it doesn't scroll with the page.
CSS Background Attachment Fixed Property
when the page is scrolled the background image will be in fixed mode to the content
Try It Now
Local
A new value recently introduced in the w3 series "Backgrounds and Borders Level 3" module,is "local."
CSS Background Attachment Local Property
Try It Now
The value of local is not yet supported in Firefox at the time of this recording,
but Safari, Chrome, Opera, and IE9 and above do support it.
Finally, instead of having to write each of the individual CSS declarations
every time we want to use a background color, image, position, and so forth,
we can instead merge all of them into one shorthand property--
the background property. background:
When using the background shorthand property,
the standard order of the property values is background color,
background image, background repeat, background attachment,
and the background position properties.
Browser compatibility
| Feature | |||||||
|---|---|---|---|---|---|---|---|
| Basic support | 1.0 | 1.0 | 1.0 (1.7 or earlier) | 3.5 | 4.0 | 2.1 | 3.2 |
| Multiple backgrounds | 1.0 | 1.3 | 3.6 (1.9.2) | 10.5 | 9.0 | 2.1 | 3.2 |
| local | 4.0 | 5.0 | 25 | 10.5 | 9.0 | ? | ? |
Practice with Our Interactive Live Editors and Take your CSS Skills to the next level
Example 1 Example 2 Example 3Other CSS Background Properties you might want to Learn
CSS Background Color PropertiesCSS Background Image Property
CSS Background Repeat Property
CSS Background Properties
Sources and Credits
The source of the content has been referred and updated with Mozilla Foundation and W3C Organization
Last Updated Jul 21, 2015, 12:00:06 PM
