CSS background-attachment Property

Read

Discuss

The property background-attachment property in CSS is used to specify the kind of attachment of the background image with respect to its container. It can be set to scroll or remain fixed. It can be applied to all HTML elements.

Syntax:

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

Property Default Value:

scroll: It sets the background image to get fixed at its position with respect to the containing element and scroll with the page. It is the default value.
fixed: This property is used to set the background image to fixed at its position with respect to the viewport.
local: This property is used to set the background image to scroll along with the content of its container element instead of the page.
initial: It is used to set the background-attachment property to its default value.
inherit: It is used to set the property from its parent element.

Syntax:

background-attachment: scroll;

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

Output:

Supported Browsers: The browser supported by background-attachment property are listed below:

Google Chrome 1.0 and above
Edge 12.0 and above
Internet Explorer 4.0 and above
Firefox 1.0 and above
Opera 3.5 and above
Safari 1.0 and above

Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!

Last Updated : 13 Jun, 2023

CSS background-attachment Property

html

html

html

html

Please Login to comment...