HTML | DOM Style background Property

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

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:

  • Before Clicking the button:
    color-before
  • After Clicking the button:
    color-after

Example: background-image property

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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.

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:

  • Before Clicking the button:
    repeat-before
  • After Clicking the button:
    repeat-after

Example: This example sets the attachment property to ‘scroll’.

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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’.

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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.

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:

  • Before Clicking the button:
    size-before
  • After Clicking the button:
    size-after

Example: This example sets the background origin to ‘border-box’.

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:

  • Before Clicking the button:
    origin-before
  • After Clicking the button:
    origin-after

Example: This example sets the background clip to ‘content-box’.

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:

  • Before Clicking the button:
    clip-before
  • After Clicking the button:
    clip-after

Example: It set the property it’s default

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:

    • Before Clicking the button:
      initial-before
    • After Clicking the button:
      initial-after

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

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    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

    Technical Writer Lets have an update

    If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

    Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




    Article Tags :
    Practice Tags :


    Be the First to upvote.


    Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.