HTML - DOM Style Object background Property

Quiz

HTML DOM Style Object background property is a short hand property which sets or returns upto 8 separate background properties of an element.

DOM Property and Corresponding CSS Property

DOM Property	CSS Property
attachment	background-attachment
color	background-color
image	background-image
position	background-position
repeat	background-repeat
clip	background-clip
origin	background-origin
size	background-size

Syntax

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

Set the background property:

object.style.background= "color | image | repeat | attachment | position | size | origin | clip | initial | inherit";

Get the background property:

object.style.background;

Property Values

Value	Description
attachment	It sets wehether the image would scroll or remain fixed. It's default value is scroll.
color	It sets the background color of an element. It's default value is transparent.
image	It sets the background image of an element. It's default value is none.
position	It sets the starting position of a background image. It's default value is 0% 0%.
repeat	It sets how a background image should be repeated along the x and y-axis. It's default value is repeat.
clip	It sets the painting area of background image. It's default value is border-box.
origin	It sets the background's origin, which could be from the start of the border, inside the border or inside the padding. It's default value is padding-box.
size	It sets the size of the background image of the element. It's default value is auto.
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 of an element.

Examples of HTML DOM Style Object 'background' Property

The following examples illustrates some properties of background property.

Add Background Image to Body

In the following example, we have added an image to the body using background property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object background Property
    </title>
    <style>
        body {
            height: 400px;
            width: 400px;
        }
    </style>
</head>
<body>
    <p>Click to change background image.</p>
    <button onclick="fun()">Change</button>
    <div id="animation"></div>
    <script>
        function fun() {
            document.body.style.background = 
            "url('html/images/logo.png') no-repeat center"
        }
    </script>
</body>
</html>

Change Background of div Element

In the following example we have changed the background color of the div element from red to green.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object background Property
    </title>
    <style>
        #back {
            height: 400px;
            width: 400px;
            background-color: red;
            align-content: center;
        }
    </style>
</head>
<body>
    <p>Click to change background of div.</p>
    <button onclick="fun()">Change</button>
    <div id="back">Welcome to Tutorials Point.</div>
    <script>
        function fun() {
            document.getElementById("back")
            .style.background = "#04af2f no-repeat center"
        }
    </script>
</body>
</html>

Change the background of Document

In this example using color property value of background property, we have changed the color from red to green.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object background Property
    </title>
    <style>
        #back {
            background-color: red;
            align-content: center;
            color: white;
        }
    </style>
</head>
<body>
    <p>Click to change background of div.</p>
    <button onclick="fun()">Change</button>
    <p id="back"> 
        Color of this paragraph is going to change.
    </p>
    <script>
        function fun() {
            document.getElementById("back")
            .style.background = "#04af2f"
        }
    </script>
</body>
</html>

Supported Browsers

Property
background	Yes 1	Yes 12	Yes 1	Yes 1	Yes 3.5

html_dom.htm

Print Page