CSS background-attachment Property

Last Updated : 11 Jul, 2025

The background-attachment property sets whether a background image scrolls with the rest of the page or is fixed. It has three possible values: scroll (default, the image moves with content), fixed (image stays in place), and `local` (image scrolls within the element).

Syntax

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

Property Value

Property	Description
scroll	Sets the background image to stay fixed relative to the containing element and scroll with the page. Default value.
fixed	Sets the background image to stay fixed relative to the viewport.
local	Sets the background image to scroll along with the content of its container element.
initial	Sets the background-attachment property to its default value.
inherit	Inherits the property from its parent element.

Example 1: Using background-attachment: scroll

In this example, we are using background-attachment: scroll property.

html

<!DOCTYPE html>
<html>

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

    <style>
        #example {
            background-image:
                url(
"https://media.geeksforgeeks.org/wp-content/uploads/geeks-25.png");
            background-position: center;
            background-repeat: no-repeat;
            background-attachment: scroll;
        }
    </style>
</head>

<body style="text-align:center">
    <h1>GeeksforGeeks</h1>
    <h2> background-attachment: scroll;</h2><br><br>

    <div id="example">
        <p>
            Prepare for the Recruitment drive of product
            based companies like Microsoft, Amazon,
            Adobe etc with a free online placement
            preparation course. The course focuses on
            various MCQ's & Coding question likely to
            be asked in the interviews & make your
            upcoming placement season efficient and
            successful.
        </p>

        <br>
        <br>
        <br>
        <p>
            This course is especially designed for the
            Java apprentices who want to hone their
            skills in Java for Coding Interviews and
            Competitive Programming. No matter if you
            are a school student or college student,
            if you have the zeal of programming, this
            is the right time to start.
        </p>

        <br>
        <br>
        <br>
        <p>
            Prepare for the Recruitment drive of product
            based companies like Microsoft, Amazon,
            Adobe etc with a free online placement
            preparation course. The course focuses on
            various MCQ's & Coding question likely to
            be asked in the interviews & make your
            upcoming placement season efficient and
            successful
        </p>
        <br>
        <br>
        <br>
        <p>
            This course is especially designed for the
            Java apprentices who want to hone their
            skills in Java for Coding Interviews and
            Competitive Programming. No matter if you
            are a school student or college student,
            if you have the zeal of programming, this
            is the right time to start.
        </p>

        <br>
        <br>
        <br>
        <p>
            Prepare for the Recruitment drive of product
            based companies like Microsoft, Amazon,
            Adobe etc with a free online placement
            preparation course. The course focuses on
            various MCQ's & Coding question likely to
            be asked in the interviews & make your
            upcoming placement season efficient and
            successful
        </p>

    </div>
</body>

</html>

Output:

Example 2: Using background-attachment: fixed

In this example, we are using the background-attachment : fixed property.

html

<!DOCTYPE html>
<html>
  
<head>
    <title>
        background-attachment property
    </title>

    <style>
        #example {
            background-image:
                url(
"https://media.geeksforgeeks.org/wp-content/uploads/geeks-25.png");
            background-position: center;
            background-repeat: no-repeat;
            background-attachment: fixed;
        }
    </style>
</head>

<body style="text-align:center">
    <h1>GeeksforGeeks</h1>
    <h2> background-attachment: fixed;</h2><br><br>

    <div id="example">

        <p>
            Prepare for the Recruitment drive of product
            based companies like Microsoft, Amazon,
            Adobe etc with a free online placement
            preparation course. The course focuses on
            various MCQ's & Coding question likely to
            be asked in the interviews & make your
            upcoming placement season efficient and
            successful.
        </p>

        <br>
        <br>
        <br>
        <p>
            This course is especially designed for the
            Java apprentices who want to hone their
            skills in Java for Coding Interviews and
            Competitive Programming. No matter if you
            are a school student or college student,
            if you have the zeal of programming, this
            is the right time to start.
        </p>

        <br>
        <br>
        <br>
        <p>
            Prepare for the Recruitment drive of product
            based companies like Microsoft, Amazon,
            Adobe etc with a free online placement
            preparation course. The course focuses on
            various MCQ's & Coding question likely to
            be asked in the interviews & make your
            upcoming placement season efficient and
            successful
        </p>

        <br>
        <br>
        <br>
        <p>
            This course is especially designed for the
            Java apprentices who want to hone their
            skills in Java for Coding Interviews and
            Competitive Programming. No matter if you
            are a school student or college student,
            if you have the zeal of programming, this
            is the right time to start.
        </p>

        <br>
        <br>
        <br>
        <p>
            Prepare for the Recruitment drive of product
            based companies like Microsoft, Amazon,
            Adobe etc with a free online placement
            preparation course. The course focuses on
            various MCQ's & Coding question likely to
            be asked in the interviews & make your
            upcoming placement season efficient and
            successful
        </p>
    </div>
</body>
  
</html>

Output:

Example 3: Using background-attachment: local

In this example, we are using background-attachment: local property.

html

<!DOCTYPE html>
<html>
<head>
    <title>
        background-attachment property
    </title>

    <style>
        #example {
            background-image:
                url(
"https://media.geeksforgeeks.org/wp-content/uploads/geeks-25.png");
            background-position: center;
            background-repeat: no-repeat;
            background-attachment: local;
        }
    </style>
</head>

<body style="text-align:center">
    <h1>GeeksforGeeks</h1>
    <h2> background-attachment: local;</h2><br><br>

    <div id="example">

        <p>
            Prepare for the Recruitment drive of product
            based companies like Microsoft, Amazon,
            Adobe etc with a free online placement
            preparation course. The course focuses on
            various MCQ's & Coding question likely to
            be asked in the interviews & make your
            upcoming placement season efficient and
            successful.
        </p>

        <br>
        <br>
        <br>
        <p>
            This course is especially designed for the
            Java apprentices who want to hone their
            skills in Java for Coding Interviews and
            Competitive Programming. No matter if you
            are a school student or college student,
            if you have the zeal of programming, this
            is the right time to start.
        </p>

        <br>
        <br>
        <br>
        <p>
            Prepare for the Recruitment drive of product
            based companies like Microsoft, Amazon,
            Adobe etc with a free online placement
            preparation course. The course focuses on
            various MCQ's & Coding question likely to
            be asked in the interviews & make your
            upcoming placement season efficient and
            successful
        </p>

        <br>
        <br>
        <br>
        <p>
            This course is especially designed for the
            Java apprentices who want to hone their
            skills in Java for Coding Interviews and
            Competitive Programming. No matter if you
            are a school student or college student,
            if you have the zeal of programming, this
            is the right time to start.
        </p>

        <br>
        <br>
        <br>
        <p>
            Prepare for the Recruitment drive of product
            based companies like Microsoft, Amazon,
            Adobe etc with a free online placement
            preparation course. The course focuses on
            various MCQ's & Coding question likely to
            be asked in the interviews & make your
            upcoming placement season efficient and
            successful
        </p>

    </div>
</body>
</html>

Output:

Example 4: Using background-attachment: initial

In this example, we are using background-attachment: initial property.

html

<!DOCTYPE html>
<html>
  
<head>
    <title>
        background-attachment property
    </title>

    <style>
        #example {
            background-image:
                url(
"https://media.geeksforgeeks.org/wp-content/uploads/geeks-25.png");
            background-position: center;
            background-repeat: no-repeat;
            background-attachment: initial;
        }
    </style>
</head>

<body style="text-align:center">
    <h1>GeeksforGeeks</h1>
    <h2> background-attachment: initial;</h2><br><br>

    <div id="example">
        <p>
            Prepare for the Recruitment drive of product
            based companies like Microsoft, Amazon,
            Adobe etc with a free online placement
            preparation course. The course focuses on
            various MCQ's & Coding question likely to
            be asked in the interviews & make your
            upcoming placement season efficient and
            successful.
        </p>

        <br>
        <br>
        <br>
        <p>
            This course is especially designed for the
            Java apprentices who want to hone their
            skills in Java for Coding Interviews and
            Competitive Programming. No matter if you
            are a school student or college student,
            if you have the zeal of programming, this
            is the right time to start.
        </p>

        <br>
        <br>
        <br>


        <p>
            Prepare for the Recruitment drive of product
            based companies like Microsoft, Amazon,
            Adobe etc with a free online placement
            preparation course. The course focuses on
            various MCQ's & Coding question likely to
            be asked in the interviews & make your
            upcoming placement season efficient and
            successful
        </p>

        <br>
        <br>
        <br>
        <p>
            This course is especially designed for the
            Java apprentices who want to hone their
            skills in Java for Coding Interviews and
            Competitive Programming. No matter if you
            are a school student or college student,
            if you have the zeal of programming, this
            is the right time to start.
        </p>

        <br>
        <br>
        <br>
        <p>
            Prepare for the Recruitment drive of product
            based companies like Microsoft, Amazon,
            Adobe etc with a free online placement
            preparation course. The course focuses on
            various MCQ's & Coding question likely to
            be asked in the interviews & make your
            upcoming placement season efficient and
            successful
        </p>

    </div>
</body>
  
</html>