Aquileo | HTML | DOM Style backgroundImage Property

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 =
"url('https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-logo.png')";
        }
    </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: 
url('https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-logo.png');
        }
    </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: 
url('https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-logo.png');
        }
    </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: 
url('https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-logo.png')
              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

HTML | DOM Style backgroundImage Property

Explore