CSS backgroundattachment Property (original) (raw)

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 `

background-attachment property 
<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; }

GeeksforGeeks

background-attachment: scroll;



<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>

`

**Output:

**Example 2: Using background-attachment: fixed

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

html `

background-attachment property 
<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; }

GeeksforGeeks

background-attachment: fixed;



<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>

`

**Output:

Example 3: Using background-attachment: local

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

html `

background-attachment property 
<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; }

GeeksforGeeks

background-attachment: local;



<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>

`

**Output:

**Example 4: Using background-attachment: initial

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

html `

background-attachment property 
<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; }

GeeksforGeeks

background-attachment: initial;



<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>

`

**Output:

**Supported Browsers

The browser supported by _background-attachment property are listed below: