CSS background-attachment Property
Tags: learncss, cssb
Published: 2021-02-19 06:54:44

---
title: CSS background-attachment Property
published: true
date: 2021-02-17 11:59:42 UTC
tags: LearnCSS,CSSB
canonical_url: https://sharepointanchor.com/learn-css/css-background-attachment-property/
---

The [CSS](https://sharepointanchor.com/learn-css/ "CSS") background-attachment property is used to define **if the background-image is fixed, or it will scroll along with the rest of the page**. It is one of the CSS3 properties.

- The Background-attachment property includes the following values. 
  - **scroll**
  - **fixed**
  - **local**
  - **initial**
  - **inherit**

## Background-attachment Characteristics:

| **Initial value** | scroll |
| **Applies to** | All elements. It also applies to **`::first-letter`** and **`::first-line`** |
| **Inherited** | No |
| **Animatable** | No |
| **Version** | CSS1 |
| **JavaScript syntax** | **`object.style.backgroundAttachment = "scroll";`** |

## Syntax:

```

background-attachment: scroll | fixed | local | initial | inherit;

```

## Values:

| **Value** | **Description** |
| --- | --- |
| scroll | It is a **default** value. This value makes the **background image scroll along with the element**. |
| fixed | This value will **fix the background image**. |
| local | It will **scroll the background image**  **along with the element's contents**. |
| initial | This will **set the property to its default value**. |
| inherit | **Inherits the property from its parent** element. |

## Example of Background-attachment property: 

In the following code, we use background-attachment property with scroll value. Thus, the background image scrolls with the page.

```

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      body {

        background-image: url("https://sharepointanchor.com/wp-content/uploads/2021/02/Flat-Mountains.png");

        background-repeat: no-repeat;

        background-attachment: scroll;

        background-size: 500px 100px;

      }
    </style>
  </head>
  <body>

    <h2>Background-attachment Example</h2>

    <p>The background-image scrolls with the page. Try to scroll down.</p>
    <p>The background-image scrolls with the page. Try to scroll down.</p>
    <p>The background-image scrolls with the page. Try to scroll down.</p>
    <p>The background-image scrolls with the page. Try to scroll down.</p>
    <p>The background-image scrolls with the page. Try to scroll down.</p>
    <p>The background-image scrolls with the page. Try to scroll down.</p>
    <p>The background-image scrolls with the page. Try to scroll down.</p>
    <p>The background-image scrolls with the page. Try to scroll down.</p>
    <p>The background-image scrolls with the page. Try to scroll down.</p>
    <p>The background-image scrolls with the page. Try to scroll down.</p>
    <p>The background-image scrolls with the page. Try to scroll down.</p>
    <p>The background-image scrolls with the page. Try to scroll down.</p>
    <p>The background-image scrolls with the page. Try to scroll down.</p>
    <p>The background-image scrolls with the page. Try to scroll down.</p>
    <p>The background-image scrolls with the page. Try to scroll down.</p>
    <p>The background-image scrolls with the page. Try to scroll down.</p>
    <p>The background-image scrolls with the page. Try to scroll down.</p>
    <p>The background-image scrolls with the page. Try to scroll down.</p>
    <p>The background-image scrolls with the page. Try to scroll down.</p>
    <p>The background-image scrolls with the page. Try to scroll down.</p>
    <p>The background-image scrolls with the page. Try to scroll down.</p>
    <p>The background-image scrolls with the page. Try to scroll down.</p>
    <p>The background-image scrolls with the page. Try to scroll down.</p>
    <p>The background-image scrolls with the page. Try to scroll down.</p>
    <p>The background-image scrolls with the page. Try to scroll down.</p>
    <p>The background-image scrolls with the page. Try to scroll down.</p>
    <p>The background-image scrolls with the page. Try to scroll down.</p>
    <p>The background-image scrolls with the page. Try to scroll down.</p>
    <p>The background-image scrolls with the page. Try to scroll down.</p>
    <p>The background-image scrolls with the page. Try to scroll down.</p>
    <p>If you do not see any scrollbars, try to resize the browser window.</p>

  </body>
</html>

```

## Result:

By running the above code, you will get the output as shown as below.

![](https://sharepointanchor.com/wp-content/uploads/2021/02/zhZA6ZqRxR.gif)<figcaption>Background attachment with scroll value</figcaption>

## Example of the background-attachment property with the fixed value: 

In the below code, the background image is "fixed", so it will not move with the page.

```

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      body {

        background-image: url("https://sharepointanchor.com/wp-content/uploads/2021/02/Flat-Mountains.png");

        background-repeat: no-repeat;

        background-attachment: fixed;

        background-size: 500px 100px;

      }
    </style>
  </head>
  <body>

    <h2>Background-attachment example</h2>

    <p>The background-image is fixed. Try to scroll down the page.</p>
    <p>The background-image is fixed. Try to scroll down the page.</p>
    <p>The background-image is fixed. Try to scroll down the page.</p>
    <p>The background-image is fixed. Try to scroll down the page.</p>
    <p>The background-image is fixed. Try to scroll down the page.</p>
    <p>The background-image is fixed. Try to scroll down the page.</p>
    <p>The background-image is fixed. Try to scroll down the page.</p>
    <p>The background-image is fixed. Try to scroll down the page.</p>
    <p>The background-image is fixed. Try to scroll down the page.</p>
    <p>The background-image is fixed. Try to scroll down the page.</p>
    <p>The background-image is fixed. Try to scroll down the page.</p>
    <p>The background-image is fixed. Try to scroll down the page.</p>
    <p>The background-image is fixed. Try to scroll down the page.</p>
    <p>The background-image is fixed. Try to scroll down the page.</p>
    <p>The background-image is fixed. Try to scroll down the page.</p>
    <p>The background-image is fixed. Try to scroll down the page.</p>
    <p>The background-image is fixed. Try to scroll down the page.</p>
    <p>The background-image is fixed. Try to scroll down the page.</p>
    <p>The background-image is fixed. Try to scroll down the page.</p>
    <p>The background-image is fixed. Try to scroll down the page.</p>
    <p>The background-image is fixed. Try to scroll down the page.</p>
    <p>The background-image is fixed. Try to scroll down the page.</p>
    <p>The background-image is fixed. Try to scroll down the page.</p>
    <p>If you do not see any scrollbars, try to resize the browser window.</p>
  </body>
</html>

```

## Result:

Now, you will see the result as shown in the below image.

![](https://sharepointanchor.com/wp-content/uploads/2021/02/ZyVasljUSy.gif)<figcaption>Background-attachment property with fixed value</figcaption>

## Example of the background-attachment property with a disappearing fixed background image:

This code will disappear the fixed background image.

```

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .example {

        background-image: url("https://sharepointanchor.com/wp-content/uploads/2021/02/Flat-Mountains.png");

        min-height: 500px;

        background-attachment: fixed;

        background-position: center;

        background-repeat: no-repeat;

        background-size: cover;
      }
    </style>
  </head>
  <body>

    <h2>Background-attachment example</h2>

    <p> Scroll the page to see the effect. </p>

    <div class="example"></div>

    <div style="height:800px;background-color:#FD8D8B;"></div>

  </body>
</html>

```

## Result:

You will get the result of the above code as shown in the below image.

![](https://sharepointanchor.com/wp-content/uploads/2021/02/PAGJTqUQYb.gif)<figcaption>Disappear background image</figcaption>

## Browser-Support:

![](https://sharepointanchor.com/wp-content/uploads/2021/02/chrome_NtTTrR1mfk.png)<figcaption>Browser-support</figcaption>

The post [CSS background-attachment Property](https://sharepointanchor.com/learn-css/css-background-attachment-property/) appeared first on [Share Point Anchor](https://sharepointanchor.com).