Backgroundattachment

Background-attachment is a CSS property that controls how a background image is positioned when the page is scrolled. It applies to all background layers defined on an element, including cases with multiple backgrounds specified via comma-separated values.

The property accepts several values. The default is scroll, which means the background image scrolls along with the element’s content as the page is moved. Fixed fixes the background to the viewport, so it remains in place during scrolling and can produce a parallax-like effect. Local attaches the background to the element’s content box; the image scrolls with the element’s own scrolling, which is most noticeable when the element has its own scrollbar. In addition to these, the values initial and inherit follow standard CSS semantics.

In practice, background-attachment interacts with other background properties such as background-position and background-size. When using multiple background layers, each layer can have its own attachment value. Fixed backgrounds can enhance visual depth but may behave differently on various devices; on many mobile browsers, fixed is ignored or treated as scrolling for performance reasons.

Notes to consider include that local is relevant for scrollable containers, and that a fixed background is relative to the viewport rather than the element. Understanding background-attachment helps in designing layouts with parallax effects or with scrolling sections where background imagery should remain static or move with content.