totn CSS

CSS: background-attachment property

This CSS tutorial explains how to use the CSS property called background-attachment with syntax and examples.

Description

The CSS background-attachment property defines whether the background-image for an element is fixed within the viewport or scrolls along with its containing block.

Syntax

The syntax for the background-attachment CSS property is:

background-attachment: value;

Parameters or Arguments

value

Defines whether the background-image scrolls. It can be one of the following:

Value Description
scroll Image will scroll along with its containing block
div { background-image: url("logo.png"); background-attachment: scroll; }
fixed Image is fixed within the viewport and does not scroll along with its containing block
div { background-image: url("logo.png"); background-attachment: fixed; }
inherit Element will inherit the background-attachment from its parent element
div { background-image: url("logo.png"); background-attachment: inherit; }

Note

Browser Compatibility

The CSS background-attachment property has basic support with the following browsers:

  • Chrome
  • Firefox (Gecko)
  • Internet Explorer (IE)
  • Opera
  • Safari (WebKit)

Example

We will discuss the background-attachment property below, exploring examples of how to use this property in CSS.

Using Scroll

Let's look at a CSS background-attachment example where we use the scroll value.

div { background-image: url("/images/gradient.png"); 
      background-attachment: scroll; }

In this CSS background-attachment example, we have set a background-image for the <div> tag using the gradient.png file. Then we have set the image to scroll. Now the gradient.png image will scroll along with its containing block.

It is also wise when setting a background-image to also set a background-color, in case the image is not available. Let's modify our example to add a background-color of black.

div { background-color: black; 
      background-image: url("/images/gradient.png"); 
      background-attachment: scroll; }

Now if the gradient.png image is not available, the <div> will still display a black background-color.

Using Fixed

Let's look at a CSS background-attachment example where we use the fixed value.

div { background-image: url("/images/gradient.png"); 
      background-attachment: fixed; }

In this CSS background-attachment example, we have set a background-image for the <div> tag using the gradient.png file. Then we have set the image to fixed. Now the gradient.png image will remain fixed within the viewport and not scroll along with its containing block.

It is also wise when setting a background-image to also set a background-color, in case the image is not available. Let's modify our example to add a background-color of blue.

div { background-color: blue; 
      background-image: url("/images/gradient.png"); 
      background-attachment: fixed; }

Now if the gradient.png image is not available, the <div> will still display a black background-color.

Share on: