Open In App

HTML | DOM Style background Property

Improve
Improve
Like Article
Like
Save
Share
Report

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 =
        }
    </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 =
        }
    </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(
            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 =
        }
    </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 =
        }
    </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 =
        }
    </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:
        }
    </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>


Output:

  • Before Clicking the button:

 inherit-before

  • After Clicking the button:

 inherit-after

Supported Browsers: The browser supported by background Property are listed below:

  • 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