The Cascading Style Sheets Background Attachment Property

Guest Author - Diane Cipollo

The Cascading Style Sheets background-attachment property is used to control how the background image will behave on the webpage.
With CSS you can set the background image to move with the webpage as it scrolls (scroll) or to always remain visible as the page scrolls (fixed).

Let's take a look at an example.

Example

Selector

body

To control a background image on your webpage you would use the body selector in the HTML <body> tag to tell the web browser to apply this style to the background image of the entire webpage.

Property

background-attachment

The background-attachment is the attribute used to tell the web browser how to control the behavior of the background image. The property name, background-attachment, is followed by a colon (:).

Value

scroll

On the right side of the colon is the value for the background-attachment attribute. In our example, we want the image to scroll with the webpage. So we have set the value to scroll. In this case the background image will scroll as the webpage scrolls and the image will eventually disappear from view. If we wanted the background image to always remain visible as the webpage scrolls, you would set the value to fixed.