CSS background-attachment Property
Last Updated :
17 Apr, 2024
The background-attachment property in CSS is a versatile feature that determines how a background image interacts with its container. Whether you want it to scroll or remain fixed, this property has you covered. Plus, it’s applicable 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
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...