CSS | background-attachment Property

Last Updated : 01 Sep, 2021

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

Syntax:
```
background-attachment: scroll;
```

Example:

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

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:

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:

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:

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:

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

Syntax:
```
background-attachment: initial;
```

Example:

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>                    