CSS background-attachment property

The background-attachment property is used to specify that the background image is fixed or scroll with the rest of the page in the browser window.

This property has three values scroll, fixed, and local. Its default value is scroll, which causes the element to not scroll with its content. The local value of this property causes the element to scroll with the content. If we set the value to fixed, the background image will not move during scrolling in the browser.

This CSS property can support multiple background images. We can specify a different value of the background-attachment property for each background-image, separated by commas. Every image will match with the corresponding value of this property.

Syntax

The values of this property are defined as follows.

Property Values

scroll: It is the default value that prevents the element from scrolling with the contents, but scrolls with the page.

fixed: Using this value, the background image doesn't move with the element, even the element has a scrolling mechanism. It causes the image to be locked in one place, even the rest of the document scrolls.

local: Using this value, if the element has a scrolling mechanism, the background image scrolls with the content of the element.

initial: It sets the property to its default value.

inherit: It inherits the property from its parent element.

Let's understand this property by using some illustrations.

Example

In this example, we are using the scroll value of the background-attachment property, which is the default behavior. So when the page is scrolled, the background scrolls with it.

Output

Example - Using fixed value

In this example, we are using the fixed value of the background-attachment property. This value fixed the background image, and the image will not move even the rest of the document scrolls.

Output

Example - Using local value

In this example, we are using the local value of the background-attachment property. Here, the background-image will scroll with the scrolling of the element's content.

Output

Now, let's see another example in which we are using more than one background image for an element.

Example

Here, there are two background images on which we are applying the background-attachment property. The attachment for the first image is set to fixed, whereas the attachment for the second image is set to scroll.

Output