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-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.
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;
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.
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.
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.
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 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
- iOS has an issue preventing
background-position: fixedfrom 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: fixeddefined. It causes the image to get cut off and gain whitespace around it.
The browser stats and issues were taken from caniuse.com
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.