HTML - DOM Style Object backgroundImage Property

Quiz

HTML DOM Style Object backgroundImage property sets or returns the background image of an element.

Syntax

Given below are the syntax to get or set the backgroundImage property.

Set the backgroundImage property:

object.style.backgroundImage= "url('URL') | none | initial | inherit";

Get the backgroundImage property:

object.style.backgroundImage;

Property Values

Value	Description
url('URL')	It specifies image location.
none	It is default value which specifies no background image to be applied.
initial	It is used to set this property to it's default value.
inherit	It is used to inherit the property of it's parent element.

Return Value

It returns a string value which represents background image.

Examples of HTML DOM Style Object 'backgroundImage' Property

The following examples illuatrates how to set and remove the background image from the document.

Set a Background Image

The following example sets a background image in the document.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object backgroundImage Property
    </title>
    <style>
        body {
            background-repeat: no-repeat;
            background-position: right;
        }
    </style>
</head>
<body>
    <p>Click to add background image.</p>
    <button onclick="fun()">Change</button>
    <script>
        function fun(){
            document.body.style.backgroundImage=
            "url('html/images/logo.png')";
        }
    </script>
</body>
</html>

Remove a Background Image

The following removes the already existing background image from the document.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object backgroundImage Property
    </title>
    <style>
        body {
            background-image: url('/html/images/logo.png');
            background-repeat: no-repeat;
            background-position: right;
        }
    </style>
</head>
<body>
    <p>Click to remove background image.</p>
    <button onclick="fun()">Change</button>
    <script>
        function fun(){
            document.body.style.backgroundImage="none";
        }
    </script>
</body>
</html>

Supported Browsers

Property
backgroundImage	Yes 1	Yes 12	Yes 1	Yes 1	Yes 3.5

html_dom.htm

Print Page