Skip to content
Related Articles

Related Articles

HTML | DOM Style backgroundImage Property

Improve Article
Save Article
  • Last Updated : 09 Aug, 2022
Improve Article
Save Article

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"

Return Values: It returns a String, represents the background image.

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.

image: This sets the property to use the image specified. The image path may be specified in the url() function. 

Example-1: 

html




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

none: This sets the property to use no background image. 

Example-2: 

html




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

initial: This is used to set this property to its default value. 

Example-3: 

html




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

inherit: This is used to inherit the property from its parent. 

Example-4: 

html




<!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 and above
  • Edge 12 and above
  • Internet Explorer 4.0 and above
  • Firefox 1.0 and above
  • Opera 3.5 and above
  • Safari 1.0 and above

My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!