CSS background-attachment Property

The background-attachment property is used to specify whether a background’s image position should be fixed relative to the viewport, or scroll along with its container.

The initial value of background-attachment property is scroll. You can apply it to all elements. It also applies to ::first-letter and ::first-line. This property is not inheritable. This property is also not animatable. The transition between different values will be sudden.

You can provide one or more comma separated values for this property. Each value will applied to a corresponding background image. So, the first value will be used for first image, second value for the second image, and so on.

Syntax

This is the formal syntax for using background-attachment property —

background-attachment: scroll | fixed | local

Here are some examples of using this property —

background-attachment: scroll;
background-attachment: fixed;
background-attachment: local;

Acceptable Values

scroll

This is the default value. In this case, the background is fixed relative to the element itself and does not scroll with its content. It is effectively attached to the element’s border.

fixed

This keyword means that the background is fixed with regard to the viewport. Even if an element has a scrolling mechanism, a ‘fixed’ background doesn’t move with the element.

In case of paged media where no viewport exists, a fixed background is fixed with respect to the page box.

local

In this case, the background is fixed relative to the element’s content. If the element’s content is scrollable, the background will scroll with the element’s contents,. The background painting area and background positioning area are relative to the scrollable area of the element rather than to the border framing them.

Examples

To understand the following example, you should be seeing four scrollbars. One for the whole page as well as one scrollbar each for the three backgrounds.

In the first case with background-attachment: scroll, the background is fixed with respect to the top left corner of the element. The background moves only when the top left corner moves. Scrolling the whole webpage will move the top left corner of the element, hence the background moves with it.

In the second case with background-attachment: fixed, the background is fixed with respect to the viewport. This means that it won't scroll with the webpage or the element. You can scroll both inside and outside the element but the position of the background won't change.

In the third case with background-attachment: local, the background is fixed with respect to the element's content. This won't seem different from background-attachment: scroll when you scroll the whole webpage. That's becuase the content and the element are moving together. Now if you try to scroll inside the element, you will see that the background moves with the content. This movement of the background when the content inside the element is scrolling makes background attachment: local different from background-attachment: scroll.

See the Pen CSS background-attachment Property by Tutorialio (@tutorialio) on CodePen.

Browser Support

The CSS background-attachment property is fully supported in 43.5% browsers and partially supported in 45.91% browsers. Therefore, its overall browser support is 89.41%.

It is partially supported in IE 6+, Firefox 2+, Safari 4+, Opera 9+, iOS Safari 8+, Android 4.1+ and Chrome for Android 55+. It is fully supported in IE 9+, Edge 12+, Firefox 25+, Chrome 4+, Safari 5+ and Opera 11+.

Notes and Issues

  • Most mobile devices have a delay in updating the background position after scrolling a page with fixed backgrounds.
  • iOS has an issue preventing background-position: fixed from being used with background-size: cover - see details.
  • Chrome has an issue that occurs when using the will-change property on a selector which also has background-attachment: fixed defined. It causes the image to get cut off and gain whitespace around it.

The browser stats and issues were taken from caniuse.com

Reader Comments

1. You can register or login to post a comment. Asking readers to register improves the quality of discussion.

2. As a registered user, you will also get to access features like choosing between a light and dark theme or anything else that we might implement in future.

Follow Us For Updates

FacebookTwitterGoogle+
Go To Top