HTML Dog
Skip to navigation

CSS Property: background-attachment

Specifies if a background is fixed to the viewport or if it scrolls along with the contents of its containing box.

As an example, a background image applied to a long page will typically scroll with the rest of the page. If a fixed background-attachment is applied, however, the image will stay in the same position as the user scrolls the page up and down.

Possible Values

ValueDescriptionExample
scrollThe background is attached to the element box. It will scroll with the element box (and will therefore usually scroll with the page). Default behavior.
fixedThe background is attached to the viewport. It will remain stationary as the page is scrolled.
localThe background is attached to the box contents. It will scroll with the contents (which will equate to scroll unless the box has its own scrolling mechanism, via overflow, for example).
[value], [value]For multiple backgrounds. Values separated by commas correspond to multiple images separated by commas with background-image.scroll, fixed
inherit

Example


body { background-attachment: fixed; }
/* The background will remain stationary when the page's contents are scrolled through. */

Browser support

Can I Use background-attachment? Data on support for the background-attachment feature across the major browsers from caniuse.com.