Open In App

HTML | DOM Style backgroundAttachment Property

Improve
Improve
Like Article
Like
Save
Share
Report

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"

Return Values: It returns a string value, which representing how the background image is attached to the object within the document.

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: 

html




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

html




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

html




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

html




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

html




<!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 and above
  • Edge 12.0 and above
  • Internet Explorer 4.0 and above
  • Firefox 1.0 and above
  • Opera 3.5 and above
  • Safari 1.0 and above


Last Updated : 09 Aug, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads