CSS | background-attachment Property

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

  • Syntax: 
    background-attachment: scroll;
  • Example:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    

    

    
                        filter_none
    

    

    

    

    • 

  • Output:
    

    • 



fixed: This property is used to set the background image to fixed at its position with respect to the viewport.


    

  • Syntax:

    background-attachment: fixed;
    

    • 

  • Example:

    

    

    

    

    
                                    filter_none
    

    

                                        edit
    
                                    close
    

    

                                        play_arrow
    

    

                                        link
    
                                    brightness_4
    
                                    code
                                
    

    

    

    

    

    

    


    


    

    <!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>                     
    

    
    		

    
    

    

    

    

    

    

    
                        chevron_right
    

    

    

    
                        filter_none
    

    

    

    

    • 

  • Output:
    

    • 



local: This property is used to set the background image to scroll along with the content of its container element instead of the page.


    

  • Syntax:

    background-attachment: local;
    

    • 

  • Example:

    

    

    

    

    
                                    filter_none
    

    

                                        edit
    
                                    close
    

    

                                        play_arrow
    

    

                                        link
    
                                    brightness_4
    
                                    code
                                
    

    

    

    

    

    

    


    


    

    <!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>                     
    

    
    		

    
    

    

    

    

    

    

    
                        chevron_right
    

    

    

    
                        filter_none
    

    

    

    

    • 

  • Output:
    

    • 



initial: It is used to set background-attachment property to its default value.


    

  • Syntax:

    background-attachment: initial;
    

    • 

  • Example:

    

    

    

    

    
                                    filter_none
    

    

                                        edit
    
                                    close
    

    

                                        play_arrow
    

    

                                        link
    
                                    brightness_4
    
                                    code
                                
    

    

    

    

    

    

    


    


    

    <!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>                     
    

    
    		

    
    

    

    

    

    

    

    
                        chevron_right
    

    

    

    
                        filter_none
    

    

    

    

    • 

  • Output:
    


    • 



inherit: It is used to set the property from its parent element.


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


    

  • Google Chrome 1.0
    • 

  • Internet Explorer 4.0
    • 

  • Firefox 1.0
    • 

  • Opera 3.5
    • 

  • Safari 1.0
    • 






    

        My Personal Notes
        arrow_drop_up
    

    

        
        

            
            
        

    


Recommended Posts:
Archana choudhary
Check out this Author's contributed articles.
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on  the "Improve Article" button below.


					
		

    Article Tags : 
CSS
Web Technologies

           	
        

         

         
 
         
        Be the First to upvote.

                

        



        
        
        
        
        

    

            

            0
            

            

                             No votes yet.
                    

            
            
            
            
            
        

        
        

        

        

        

        

        

        


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.