CSS Background Attachment Property

Last Updated Jul 21, 2015, 12:00:06 PM





CSS Background Attachment Property

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.

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

fixed

This 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.

local

This 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.

scroll

This 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 3

Other CSS Background Properties you might want to Learn

CSS Background Color Properties

CSS 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