HTML | DOM Style backgroundAttachment Property

Last Updated : 09 Aug, 2022

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(
'https://media.geeksforgeeks.org/wp-content/uploads/20190311222622/sample-image.png')
            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(
'https://media.geeksforgeeks.org/wp-content/uploads/20190311222622/sample-image.png')
            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(
'https://media.geeksforgeeks.org/wp-content/uploads/20190311222622/sample-image.png')
            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(
'https://media.geeksforgeeks.org/wp-content/uploads/20190311222622/sample-image.png')
            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(
'https://media.geeksforgeeks.org/wp-content/uploads/20190311222622/sample-image.png') 
            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>