CSS background-attachment Property

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
Media: Visual
Computed value: As specified
Animatable: No
CSS Version: CSS1, CSS2, CSS3
JavaScript syntax: object.style.backgroundAttachment

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

Give it a Try

Click the button below to experiment with this property.

Give it a Try!

Browser Support

Desktop

4	12	1	1	3.5	1

Tablets / Mobile

≤37	18	4	10.1	3.2	1.0

Last updated by CSSPortal on: 20th October 2019

Share this Page

If you have enjoyed using CSSPortal, please consider sharing this page with other users, just click on your preferred social media link or copy the webpage from the link below.

URL

Menu