Skip to content
Related Articles

Related Articles

HTML | DOM Style backgroundImage Property
  • Last Updated : 29 Jul, 2019

The DOM Style backgroundImage Property is used to set or return the background image of an element.

Syntax:

  • To get the backgroundImage property
    object.style.backgroundImage
  • To set the backgroundImage property
    object.style.backgroundImage = "image | none | initial |
    inherit"

Property Values:

  • image: This sets the property to use the image specified. The image path may be specified in the url() function.
  • none: This sets the property to use no background image.
  • initial: This is used to set this property to its default value.
  • inherit: This is used to inherit the property from its parent.
  1. image: This sets the property to use the image specified. The image path may be specified in the url() function.

    Example-1:




    <!DOCTYPE html>
    <html lang="en">
      
    <head>
        <title>DOM Style backgroundImage Property</title>
        <style>
            .bg-img {
                border: solid;
                height: 180px;
                width: 200px;
            }
        </style>
    </head>
      
    <body>
        <h1 style="color: green">GeeksforGeeks</h1>
        <b>DOM Style backgroundImage Property</b>
        <p class="bg-img"></p>
        
        <button onclick="changeImage()">
          Change source of background image</button>
      
        <script>
            function changeImage() {
                elem = document.querySelector('.bg-img');
      
                // Setting the backgroundImage to an url
                elem.style.backgroundImage =
            }
        </script>
    </body>
      
    </html>

    Output:



    • Before clicking the button:
      image-before
    • After clicking the button:
      image-after
  2. none: This sets the property to use no background image.

    Example-2:




    <!DOCTYPE html>
    <html lang="en">
      
    <head>
        <title>DOM Style backgroundImage Property</title>
        <style>
            .bg-img {
                border: solid;
                height: 180px;
                width: 200px;
                background-image: 
            }
        </style>
    </head>
      
    <body>
        <h1 style="color: green">GeeksforGeeks</h1>
        <b>DOM Style backgroundImage Property</b>
        <p class="bg-img"></p>
        <button onclick="changeImage()">
          Change source of background image
        </button>
      
        <script>
            function changeImage() {
                elem = document.querySelector('.bg-img');
      
                // Setting the backgroundImage to none
                elem.style.backgroundImage = "none";
            }
        </script>
    </body>
      
    </html>

    Output:

    • Before clicking the button:
      none-before
    • After clicking the button:
      none-after
  3. initial: This is used to set this property to its default value.

    Example-3:




    <!DOCTYPE html>
    <html lang="en">
      
    <head>
        <title>DOM Style backgroundImage Property</title>
        <style>
            .bg-img {
                border: solid;
                height: 180px;
                width: 200px;
                background-image: 
            }
        </style>
    </head>
      
    <body>
        <h1 style="color: green">GeeksforGeeks</h1>
        <b>DOM Style backgroundImage Property</b>
        <p class="bg-img"></p>
        <button onclick="changeImage()">
          Change source of background image
         </button>
      
        <script>
            function changeImage() {
                elem = document.querySelector('.bg-img');
      
                // Setting the backgroundImage to initial
                elem.style.backgroundImage = "initial";
            }
        </script>
    </body>
      
    </html>

    Output:

    • Before clicking the button:
      initial-before
    • After clicking the button:
      initial-after
  4. inherit: This is used to inherit the property from its parent.

    Example-4:




    <!DOCTYPE html>
    <html lang="en">
      
    <head>
        <title>DOM Style backgroundImage Property</title>
        <style>
            #parent {
                border: solid;
                height: 200px;
                width: 300px;
                background: 
                  no-repeat;
                background-size: cover;
            }
              
            .bg-img {
                border: dashed;
                height: 100px;
                width: 100px;
                background-size: cover;
            }
        </style>
    </head>
      
    <body>
        <h1 style="color: green">GeeksforGeeks</h1>
        <b>DOM Style backgroundImage Property</b>
        
        <div id="parent">
            <p class="bg-img"></p>
        </div>
        <button onclick="changeImage()">
          Change source of background image
        </button>
      
        <script>
            function changeImage() {
                elem = document.querySelector('.bg-img');
      
                // Setting the backgroundImage to inherit
                elem.style.backgroundImage = "inherit";
            }
        </script>
    </body>
      
    </html>

    Output:

    • Before clicking the button:
      inherit-before
    • After clicking the button:
      inherit-after

Supported Browsers: The browser supported by backgroundImage 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 :