CSS background-attachment Property

The background-attachment property is used to specify if the background image is fixed or scroll with the rest of the page in browser window. It can be set to scroll or remain fixed.

If you set fixed the background image then the image will not move during scrolling in the browser.

There are 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.

Contents hide

Syntax

Property Values

Example – 1

Example – 2

Example – 3

Example – 4

Syntax

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

Property Values

The background-attachment property is specified as one of the keyword values from the list below.

Value	Description
scroll	The background image will scroll with the page. This is default
fixed	The background image will not scroll with the page. Even if an element has a scrolling mechanism, the background doesn’t move with the element.
local	The background image will scroll with the element’s contents.
initial	Sets this property to its default value.
inherit	Inherits this property from its parent element.

CSS background-attachment Property Values

Example – 1

Using the scroll value of the background-attachment property.

<!DOCTYPE html>
<html>

<head>
    <title>
        background-attachment property
    </title>

    <style>
        #example {
            background-image: url("https://eywiah.com/wp-content/uploads/2022/01/image-110-1024x961.png");
            font-size: 35px;
            border: 4px solid red;
            color: white;
            background-position: center;
            background-color: green;
            background-repeat: no-repeat;
            background-attachment: scroll;
        }
    </style>
</head>

<body>
    <h1> background-attachment: scroll;</h1>
    <p> If there is no scrollbar on your screen, then try to resize the browser's window to see the effect. </p>
    <div id="example">
        <p>
            Hi, Welcome to the TheNewTutorial.com.com. This site is developed so that students may learn computer science
            related technologies easily. The TheNewTutorial.com.com is always providing an easy and in-depth tutorial on various
            technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better.
        </p>
    </div>

</body>

</html>

Example – 2

Using the fixed value of the background-attachment property.

<!DOCTYPE html>
<html>

<head>
    <title>
        background-attachment property
    </title>

    <style>
        #example {
            background-image: url("https://eywiah.com/wp-content/uploads/2022/01/image-110-1024x961.png");
            font-size: 35px;
            border: 4px solid red;
            color: white;
            background-position: center;
            background-color: green;
            background-repeat: no-repeat;
            background-attachment: fixed;
        }
    </style>
</head>

<body>
    <h1> background-attachment: fixed;</h1>
    <p> If there is no scrollbar on your screen, then try to resize the browser's window to see the effect. </p>
    <div id="example">
        <p>
            Hi, Welcome to the TheNewTutorial.com. This site is developed so that students may learn computer science
            related technologies easily. The TheNewTutorial.com is always providing an easy and in-depth tutorial on various
            technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better.
        </p>
    </div>

</body>

</html>

Example – 3

Using the local value of the background-attachment property.

<!DOCTYPE html>
<html>

<head>
    <title>
        background-attachment property
    </title>

    <style>
        #example {
            background-image: url("https://eywiah.com/wp-content/uploads/2022/01/image-110-1024x961.png");
            font-size: 35px;
            border: 4px solid red;
            color: white;
            background-position: center;
            background-color: green;
            background-repeat: no-repeat;
            background-attachment: local;
        }
    </style>
</head>

<body>
    <h1> background-attachment: local;</h1>
    <p> If there is no scrollbar on your screen, then try to resize the browser's window to see the effect. </p>
    <div id="example">
        <p>
            Hi, Welcome to the TheNewTutorial.com. This site is developed so that students may learn computer science
            related technologies easily. The TheNewTutorial.com is always providing an easy and in-depth tutorial on various
            technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better.
        </p>
    </div>

</body>

</html>

Example – 4

Using more than one image.

<!DOCTYPE html>
<html>

<head>
    <title>
        background-attachment property
    </title>

    <style>
        #example {
            background-image: url("https://eywiah.com/wp-content/uploads/2022/01/cropped-fevicon-32x32.jpg"), url("https://eywiah.com/wp-content/uploads/2022/01/image-110-1024x961.png");
            height: 500px;
            border: 4px solid red;
            background-position: center;
            background-repeat: no-repeat;
            background-attachment: fixed, scroll;
        }
    </style>
</head>

<body>
    <h1> background-attachment: scroll;</h1>
    <p> If there is no scrollbar on your screen, then try to resize the browser's window to see the effect. </p>
    <div id="example">
    </div>
</body>

</html>