CSS background-attachment Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

Description

The background-attachment property determines whether the background image will scroll along with the contents of the element. The image can be fixed and remain motionless, or move together with the document. You can specify multiple values for a series of background images, listing the values separated by commas.

Initial value: scroll
Applies to: All elements
Inherited: No
Computed value: As specified
Animatable: No
JavaScript syntax: object.style.backgroundAttachment

Interactive Demo

background-attachment: scroll;

background-attachment: fixed;
background-position: center right;

background-attachment: local;

background-attachment: local, scroll;

background-attachment: scroll, local;

The rusty swing set creaked a lonely lullaby in the twilight, shadows lengthening like grasping fingers across the dew-kissed grass. A lone dandelion seed, adrift on the breeze, whispered secrets of faraway fields, of dandelion suns and galaxies spun from fluff. Somewhere, beyond the veil of dusk, a coyote laughed, echoing through the stillness like a forgotten memory.

Syntax

background-attachment: <attachment> [ , <attachment> ]*

Values

<attachment> = scroll | fixed | local

scrollBackground image scrolls with the object as the document is scrolled.
fixedBackground image will not scroll with its containing element, instead remaining stationary within the viewport.
localBackground image will not scroll with its containing element, but will scroll when the element's content scrolls: it is fixed regarding the element's content.
inherit

Example

HTML

<p>Example of the css background-attachment property.</p>

CSS

body { 
   background-image: url(images/diamond.png);
   background-attachment: fixed;
   height: 500px;
} 
p {
   padding: 10px;
   background: white;
   color: black;
}

Result

Editor