Which property is used to control the scrolling of an image in the background ? Last Updated : 23 Jul, 2025 Comments Improve Suggest changes Like Article Like Report In this article, we will discuss the property that is used to control the scrolling of an image in the background. The 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 make it remain fixed. It can be applied to all HTML elements.Syntax:background-attachment: scroll|fixed|local|initial|inherit;Example 1: The following example demonstrates the "scroll" value for the background-attachment property of CSS. The background-attachment image also gets scrolled. HTML <!DOCTYPE html> <html> <head> <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 style="color:green">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> <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: The following example demonstrates the "fixed" value for the background-attachment property of CSS. The background-attachment image is fixed while the content is scrolled. HTML <!DOCTYPE html> <html> <head> <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 style="color:green">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> <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: Comment More infoAdvertise with us Next Article How to Create a Sliding Background Effect Using CSS ? S sravankumar_171fa07058 Follow Improve Article Tags : Web Technologies CSS CSS-Questions Similar Reads Which property is used to set the background image of an element using CSS ? In this article, we will see the property used for setting the background image of an element in CSS. The background image can be set using the background-image property that is used to set one or more background images for an element. By default, it places the image in the top left corner. To speci 1 min read How to Change Background Images on Scroll using CSS? Background images are crucial in web development, significantly enhancing the user experience. Using background images on a webpage can effectively showcase a brand or convey specific messages. Here, we will explore how to change background images on scroll using CSS. ApproachThe HTML includes a spa 2 min read Creating a scrolling background in Pygame In this article, we are going to know how to create a scrolling background in Pygame. Pygame offers many advantages for developing basic infrastructure for many games. One of them is the scrolling background. Many of the popular games of all time required this feature of endless scrolling. This scro 4 min read How to Create a Sliding Background Effect Using CSS ? A sliding background effect in CSS creates a smooth, continuous movement of a webpage’s background image, typically in a horizontal or vertical direction. It gives a dynamic, animated feel by using properties like background-position and animation, enhancing visual engagement without additional Java 2 min read How to Create a Sliding Background Effect Using CSS ? A sliding background effect in CSS creates a smooth, continuous movement of a webpage’s background image, typically in a horizontal or vertical direction. It gives a dynamic, animated feel by using properties like background-position and animation, enhancing visual engagement without additional Java 2 min read How to control scrolling of image using CSS ? In this article, we will see what property can be utilized to control the image scroll using CSS. To accomplish this task, we can implement the background-attachment property that specifies the kind of attachment of the background image with respect to its container. It can be applied to all HTML el 10 min read Like