Which property is used to control the scrolling of an image in the background ?

Last Updated : 01 Jun, 2022

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>                                 