Skip to content
Related Articles

Related Articles

HTML | DOM Style backgroundAttachment Property
  • Difficulty Level : Basic
  • Last Updated : 29 Jul, 2019

The Style backgroundAttachment property in HTML DOM is used to set or return whether the background image should be fixed or scroll with the content.

Syntax:

  • It returns the backgroundAttachment property.
    object.style.backgroundAttachment
  • It is used to set the backgroundAttachment property.
    object.style.backgroundAttachment = "scroll|fixed|local|initial|
    inherit"

Property Values: Description of each property value with the example.

    scroll: This value makes the background image scroll along with the element. It is the default value.

  • Example:






    <!DOCTYPE html>
    <html>
          
    <head>
        <title>
            DOM Style backgroundAttachment Property
        </title>
          
        <style>
            body {
                background: url(
                no-repeat right top / 200px;
                background-attachment: fixed;
            }
            #scrolling-area {
                height: 1000px;
            }
        </style>
    </head>
      
    <body>
        <h1 style="color: green; margin-top: 100px;">
            GeeksforGeeks
        </h1>
          
        <b>DOM Style backgroundAttachment Property</b>
          
        <p>
            Click on the button to change the attachment
            of the background image to 'scroll'.
        </p>
          
        <button onclick="changeAttachment()">
            Change attachment
        </button>
          
        <div id="scrolling-area"><br>
            This is a large area for scrolling.
        </div>
      
        <!-- Script to change backgroundAttachment -->
        <script>
            function changeAttachment() {
                document.body.style.backgroundAttachment
                        = 'scroll';
            }
        </script>
    </body>
      
    </html>                    
  • Output:
    Before clicking the button:
    scroll-before
    After clicking the button:
    scroll-after

    fixed: This value makes the background image fixed with regard to the viewport.

  • Example:




    <!DOCTYPE html>
    <html>
          
    <head>
        <title>
            DOM Style backgroundAttachment Property
        </title>
          
        <style>
            body {
                background: url(
                no-repeat right top / 200px;
            }
            #scrolling-area {
                height: 1000px;
            }
        </style>
    </head>
      
    <body>
        <h1 style="color: green; margin-top: 100px;">
            GeeksforGeeks
        </h1>
          
        <b>DOM Style backgroundAttachment Property</b>
          
        <p>
            Click on the button to change the attachment
            of the background image to 'scroll'.
        </p>
          
        <button onclick="changeAttachment()">
            Change attachment
        </button>
          
        <div id="scrolling-area"><br>
            This is a large area for scrolling.
        </div>
      
        <!-- Script to change backgroundAttachment -->
        <script>
            function changeAttachment() {
                document.body.style.backgroundAttachment
                        = 'fixed';
            }
        </script>
    </body>
      
    </html>                    
  • Output:
    Before clicking the button:
    fixed-before
    After clicking the button:
    fixed-after

    local: This value makes the background image scroll along with the element’s content.

  • Example:




    <!DOCTYPE html>
    <html>
          
    <head>
        <title>
            DOM Style backgroundAttachment Property
        </title>
          
        <style>
            body {
                background: url(
                no-repeat right top / 200px;
                background-attachment: fixed;
            }
            #scrolling-area {
                height: 1000px;
            }
        </style>
    </head>
      
    <body>
        <h1 style="color: green; margin-top: 100px;">
            GeeksforGeeks
        </h1>
          
        <b>DOM Style backgroundAttachment Property</b>
          
        <p>
            Click on the button to change the attachment
            of the background image to 'scroll'.
        </p>
          
        <button onclick="changeAttachment()">
            Change attachment
        </button>
          
        <div id="scrolling-area"><br>
            This is a large area for scrolling.
        </div>
      
        <!-- Script to change backgroundAttachment -->
        <script>
            function changeAttachment() {
                document.body.style.backgroundAttachment
                        = 'local';
            }
        </script>
    </body>
      
    </html>                    
  • Output:
    Before clicking the button:
    local-before
    After clicking the button:
    local-after

    initial: It is used to set this property to its default value.

  • Example:




    <!DOCTYPE html>
    <html>
          
    <head>
        <title>
            DOM Style backgroundAttachment Property
        </title>
          
        <style>
            body {
                background: url(
                no-repeat right top / 200px;
                background-attachment: fixed;
            }
            #scrolling-area {
                height: 1000px;
            }
        </style>
    </head>
      
    <body>
        <h1 style="color: green; margin-top: 100px;">
            GeeksforGeeks
        </h1>
          
        <b>DOM Style backgroundAttachment Property</b>
          
        <p>
            Click on the button to change the attachment
            of the background image to 'scroll'.
        </p>
          
        <button onclick="changeAttachment()">
            Change attachment
        </button>
          
        <div id="scrolling-area"><br>
            This is a large area for scrolling.
        </div>
      
        <!-- Script to change backgroundAttachment -->
        <script>
            function changeAttachment() {
                document.body.style.backgroundAttachment
                        = 'initial';
            }
        </script>
    </body>
      
    </html>                    
  • Output:
    Before clicking the button:
    initial-before
    After clicking the button:
    initial-after

    inherit: It inherits the property from its parent element.

  • Example:




    <!DOCTYPE html>
    <html>
          
    <head>
        <title>
            DOM Style backgroundAttachment Property
        </title>
          
        <style>
            .bg-img {
                height: 150px;
                background: url(
                no-repeat right top / 200px;
            }
      
            #parent {
                background-attachment: fixed;
                height: 1000px;
            }
        </style>
    </head>
      
    <body>
        <div id="parent">
            <div class="bg-img"></div>
              
            <h1 style="color: green;">
                GeeksforGeeks
            </h1>
              
            <b>
                DOM Style backgroundAttachment Property
            </b>
              
            <p>
                Click on the button to change the attachment
                of the background image to 'inherit'.
            </p>
              
            <button onclick="changeAttachment()">
                Change attachment
            </button>
        </div>
      
        <!-- Script to change backgroundAttachment property -->
        <script>
            function changeAttachment() {
                elem = document.querySelector('.bg-img');
                elem.style.backgroundAttachment = 'inherit';
            }
        </script>
    </body>
      
    </html>                    
  • Output:
    Before clicking the button:
    inherit-before
    After clicking the button:
    inherit-after

Supported Browsers: The browser supported by DOM Style backgroundAttachment 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 Articles
Page :