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> Output: 
Supported Browsers
The browser supported by background-attachment property are listed below: