Skip to content
Related Articles

Related Articles

HTML | DOM Style background Property
  • Difficulty Level : Easy
  • Last Updated : 29 Jul, 2019

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"

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: background-color property




<!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: background-image property




<!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: This example using repeat-x property to repeat the background image along the x axis.




<!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: This example sets the attachment property to ‘scroll’.




<!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: This example sets the position of the background image to ‘center’.




<!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: This example sets the size of the background image to ‘200px’ in width and ‘150px’ in height.




<!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: This example sets the background origin to ‘border-box’.




<!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: This example sets the background clip to ‘content-box’.




<!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: It set the property it’s default




<!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:
      initial-before
    • After Clicking the button:
      initial-after

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




    <!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
    • Internet Explorer 4.0
    • Firefox 1.0
    • Opera 3.5
    • Safari 1.0
    My Personal Notes arrow_drop_up
  • Recommended Articles
    Page :