CSS background-attachment property

Description

CSS background-attachment property represents the position of background image within a box. The position of box is specified with respect to both the viewport (visible area of web page) and the content within the box.


Please use the 'inner (box)' and 'outer (viewport)' scrollbars to understand and distinguish between these properties.

Syntax

background-attachment : fixed | scroll | local

Property values

fixedDefault

The background is fixed with respect to both the content box and the viewport.

The background-image remains fixed with respect to both the box and the viewport.

background-attachment: fixed;

scroll

The background remains fixed with respect to the content box but scrolls with respect to viewport.

The background-image remains fixed with respect to the content box but does not remain fixed with respect to viewport.

background-attachment: scroll;

local

The background does not remain fixed with respect to both the content box and the viewport.

The background-image scrolls with respect to both content box and viewport.

background-attachment: local;

Applicable to

It applies to all elements

#CSS digger
Was this article helpful?

 
arrow

The background is fixed with respect to the viewport.

The background scrolls with respect to the viewport.

The background remains fixed with respect to the element's contents. But it may move with the conent when scrolling is possible within the element.

The background is fixed with respect to the viewport.

The background scrolls with respect to the viewport.

The background remains fixed with respect to the element's contents. But it may move with the conent when scrolling is possible within the element.

×

Ctrl+D