HTML | DOM Style background Property

Last Updated : 09 Aug, 2022

The Style background property in HTML DOM is a short hand property used to set or return the background of an element. It can help to manipulate one or more of eight background properties.

Syntax:

It returns the background property.

object.style.background

It is used to set the background property.

object.style.background = "color image repeat attachment 
position size origin clip|initial|inherit"

Return Values: It returns a string value, which represents the background of an element.

Property Values: There are 8 property in background those are described below:

color: It is used to set the background color of an element. It corresponds to the background-color property.
image: It is used to set the background image of an element. It corresponds to the background-image property.
repeat: It is used to set how a background image should be repeated along the x and y-axis. It corresponds to the background-repeat property.
attachment: It is used to set whether the image would scroll or remain fixed. It corresponds to the background-attachment property.
position: It is used to set the starting position of a background image. It corresponds to the background-position property.
size: It is used to set the size of a background image in fixed units or a percentage. It corresponds to the background-size property.
origin: The background-origin property specifies the origin position of a background image. It corresponds to the background-origin property.
clip: It is used to set the painting area of a background image. It corresponds to the background-clip property.
initial: It is used to set the property to its default value.
inherit: It is used to inherit the property from its parent.

Example 1: background-color property

html

<!DOCTYPE html>
<html>
    
<head>
    <title>
        DOM Style Background Property
    </title>
    
    <style>
        .GFG {
            height: 250px;
            width: 250px;
            border-style: solid;
        }
    </style>
</head>

<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
    
    <b>DOM Style Background Property</b>
    
    <p>
        Click on the button to set
        the background color
    </p>
    
    <div class="GFG"></div>
    
    <button onclick="setBg()">
        Set background color
    </button>
    
    <!-- Script to set the background color -->
    <script>
        function setBg() {
            elem = document.querySelector('.GFG');
            elem.style.background = "green";
        }
    </script>
</body>

</html>

Output:

Before Clicking the button:

color-before

After Clicking the button:

color-after

Example 2: background-image property

html

<!DOCTYPE html>
<html>
    
<head>
    <title>
        DOM Style Background Property
    </title>
    
    <style>
        .GFG {
            height: 250px;
            width: 250px;
            border-style: solid;
        }
    </style>
</head>

<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
    
    <b>DOM Style Background Property</b>
    
    <p>
        Click on the button to set
        the background image
    </p>
    
    <div class="GFG"></div>
    
    <button onclick="setBg()">
        Set background color
    </button>
    
    <!-- Script to set the background image -->
    <script>
        function setBg() {
            elem = document.querySelector('.GFG');
            elem.style.background = 
"url('https://media.geeksforgeeks.org/wp-content/uploads/20190314004249/sample-image2.png')";
        }
    </script>
</body>

</html>

Output:

Before Clicking the button:

image-before

After Clicking the button:

image-after

Example 3: This example using repeat-x property to repeat the background image along the x axis.

html

<!DOCTYPE html>
<html>
    
<head>
    <title>
        DOM Style Background Property
    </title>
    
    <style>
        .GFG {
            height: 250px;
            width: 250px;
            border-style: solid;
        }
    </style>
</head>

<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
    
    <b>DOM Style Background Property</b>
    
    <p>
        Click on the button to set
        the background image
    </p>
    
    <div class="GFG"></div>
    
    <button onclick="setBg()">
        Set background color
    </button>
    
    <!-- Script to set the background color -->
    <script>
        function setBg() {
            elem = document.querySelector('.GFG');
            elem.style.background = 
"url('https://media.geeksforgeeks.org/wp-content/uploads/20190314004249/sample-image2.png') repeat-x";
        }
    </script>
</body>

</html>

Output:

Before Clicking the button:

repeat-before

After Clicking the button:

repeat-after

Example 4: This example sets the attachment property to 'scroll'.

html

<!DOCTYPE html>
<html>
    
<head>
    <title>
        DOM Style Background 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">
        GeeksforGeeks
    </h1>
    
    <b>DOM Style Background Property</b>
    
    <p>
        Click on the button to set 
        the background color
    </p>
    
    <div class="GFG"></div>
    
    <button onclick="setBg()">
        Set background color
    </button>
    
    <div id="scrolling-area"><br> 
        This is a large area for scrolling. 
    </div> 

    <!-- Script to change backgroundAttachment -->
    <script> 
        function setBg() { 
            document.body.style.backgroundAttachment 
                    = 'scroll'; 
        } 
    </script> 
</body> 

</html>

Output:

Before Clicking the button:

attachment-before

After Clicking the button:

attachment-after

Example 5: This example sets the position of the background image to 'center'.

html

<!DOCTYPE html>
<html>
    
<head>
    <title>
        DOM Style Background Property
    </title>
    
    <style>
        .GFG {
            height: 250px;
            width: 250px;
            border-style: solid;
        }
    </style>
</head>

<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
    
    <b>DOM Style Background Property</b>
    
    <p>
        Click on the button to set
        the background image
    </p>
    
    <div class="GFG"></div>
    
    <button onclick="setBg()">
        Set background color
    </button>
    
    <!-- Script to set the background color -->
    <script>
        function setBg() {
            elem = document.querySelector('.GFG');
            elem.style.background = 
"url('https://media.geeksforgeeks.org/wp-content/uploads/20190314004249/sample-image2.png') no-repeat center";
        }
    </script>
</body>

</html>

Output:

Before Clicking the button:

position-before

After Clicking the button:

position-after

Example 6: This example sets the size of the background image to '200px' in width and '150px' in height.

html

<!DOCTYPE html>
<html>
    
<head>
    <title>
        DOM Style Background Property
    </title>
    
    <style>
        .GFG {
            height: 250px;
            width: 250px;
            border-style: solid;
        }
    </style>
</head>

<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
    
    <b>DOM Style Background Property</b>
    
    <p>
        Click on the button to set
        the background image
    </p>
    
    <div class="GFG"></div>
    
    <button onclick="setBg()">
        Set background color
    </button>
    
    <!-- Script to set the background color -->
    <script>
        function setBg() {
            elem = document.querySelector('.GFG');
            elem.style.background = 
"url('https://media.geeksforgeeks.org/wp-content/uploads/20190314004249/sample-image2.png') no-repeat center / 200px 150px ";
        }
    </script>
</body>

</html>

Output:

Before Clicking the button:

size-before

After Clicking the button:

size-after

Example 7: This example sets the background origin to 'border-box'.

html

<!DOCTYPE html>
<html>
    
<head>
    <title>
        DOM Style Background Property
    </title>
    
    <style>
        .GFG {
            height: 250px;
            width: 250px;
            padding: 20px;
            border: 10px dotted;
        }
    </style>
</head>

<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
    
    <b>DOM Style Background Property</b>
    
    <p>
        Click on the button to set
        the background image
    </p>

    <div class="GFG"></div>
    
    <button onclick="setBg()">
        Set background image
    </button>
    
    <!-- Script to set background origin property -->
    <script>
        function setBg() {
            elem = document.querySelector('.GFG');
            elem.style.background = 
"url('https://media.geeksforgeeks.org/wp-content/uploads/20190314004249/sample-image2.png') no-repeat border-box";
        }
    </script>
</body>
</html>

Output:

Before Clicking the button:

origin-before

After Clicking the button:

origin-after

Example 8: This example sets the background clip to 'content-box'.

html

<!DOCTYPE html>
<html>
    
<head>
    <title>
        DOM Style Background Property
    </title>
    
    <style>
        .GFG {
            height: 250px;
            width: 250px;
            border: 10px dotted;
        }
    </style>
</head>

<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
    
    <b>DOM Style Background Property</b>
    
    <p>
        Click on the button to set 
        the background color
    </p>
    
    <div class="GFG"></div>
    
    <button onclick="setBg()">
        Set background color
    </button>
    
    <!-- Script to set background clip property -->
    <script>
        function setBg() {
            elem = document.querySelector('.GFG');
            elem.style.background = "green content-box";
        }
    </script>
</body>
</html>

Output:

Before Clicking the button:

clip-before

After Clicking the button:

clip-after

Example 9: It set the property it's default

html

<!DOCTYPE html>
<html>
    
<head>
    <title>
        DOM Style Background Property
    </title>
    
    <style>
        .GFG {
            height: 250px;
            width: 250px;
            border-style: solid;
            background: green
        }
    </style>
</head>

<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
    
    <b>DOM Style Background Property</b>
    
    <p>
        Click on the button to set the
        background to initial
    </p>
    
    <div class="GFG"></div>
    
    <button onclick="setBg()">
        Set background
    </button>
    
    <!-- Script to set background property -->
    <script>
        function setBg() {
            elem = document.querySelector('.GFG');
            elem.style.background = "initial";
        }
    </script>
</body>

</html>

Output:

Before Clicking the button:

After Clicking the button:

initial-after

Example 10: It is used to inherit the property from its parent

HTML

<!DOCTYPE html>
<html>
<head>
    <title>
        DOM Style Background Property
    </title>
    
    <style>
        .GFG {
            margin: 20px;
            height: 100px;
            width: 100px;
            border: 5px solid;
        }

        #parent {
            height: 250px;
            width: 250px;
            border: 1px solid;
            background:
url('https://media.geeksforgeeks.org/wp-content/uploads/20190314004249/sample-image2.png') center / cover;
        }
    </style>
</head>
<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
    <b>DOM Style Background Property</b>
    
<p>
        Click on the button to set
        the background to inherit
    </p>

    
    <div id="parent">
        <div class="GFG"></div>
    </div>
    
    <button onclick="setBg()">
        Set background
    </button>
    
    <!-- Script to set background property -->
    <script>
        function setBg() {
            elem = document.querySelector('.GFG');
            elem.style.background = "inherit";
        }
    </script>
</body>
</html>