The background-attachment CSS property specifies how the background image should be attached to the viewport or an element. This property determines whether the background image is fixed within the viewport, or if it scrolls along with the element or its content. The background-image property is used in conjunction with background-attachment to achieve the desired effect.

Values of the background-attachment property

fixed | scroll | local

The initial value scroll

background-attachment: scroll;

The background image is fixed relatively to the element itself and do not scroll with its content.

See the Pen backgrond-attachment: scroll by majadc (@majadc) on CodePen.

background-attachment: fixed;

The background image is fixed relative to the viewport. If the element or its content is scrolling, the background image remains unmoved. In paged media, where there is no viewport, a ‘fixed’ background is fixed relative to the page box and is therefore replicated on every page.

See the Pen background-attachment by majadc (@majadc) on CodePen.

background-attachment: local;

The background image is fixed relative to the element itself. If the content is scrolling, the background image also scrolls with it. The element’s background color and area are painted from the edge of its padding box, which is relative to the scrollable area of the container and excludes the element’s borders.

See the Pen background-attachment: local; by majadc (@majadc) on CodePen.

Related

• background
• background-image
• background-position
• background-size
• background-repeat
• background-origin
• background-clip
• background-attachment
• background-color

Resources

• CSS3 Spec
• MDN