HTML - DOM Style Object backgroundPosition Property

Quiz

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

Syntax

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

Set the backgroundPosition property:

object.style.backgroundPosition = value;

Get the backgroundPosition property:

object.style.backgroundPosition;

Property Values

Value	Description
top left top center top right center left center center center right bottom left bottom center bottom right	It specifies the position of background image using keywords. If only one value is specified, by default other value is 'center'.
x% y%	It specifies the position of background image using percentage where x represents horizontal positioning while y represents vertical positioning. 0% 0% represents top left corner while 100% 100% represents bottom right corner. When only one value is specified, by default other value is 50%(center).
xpos ypos	It specifies the position of background image using pixels or any other CSS measurement units where x represents horizontal positioning while y represents vertical positioning. 0 0 represents top left corner while 100 100 represents bottom right corner. When only one value is specified, by default other value will be center.
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 position of background image.

Examples of HTML DOM Style Object 'backgroundPosition' Property

The following examples illustrates Positioning of background using different ways.

Position using Keywords

In the following example, we have used keywords to position the background image.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object backgroundPosition Property
    </title>
    <style>
        body {
            background: #f3f3f3 url('/html/images/logo.png') no-repeat;
            height: 300px;
            width: 300px;
        }
    </style>
</head>
<body>
    <p>Click to change positioning.</p>
    <button onclick="topcen()">Top Center</button>
    <button onclick="bottomleft()">Bottom Left</button>
    <button onclick="centerright()">Center Right</button>
    <script>
        function topcen(){
            document.body.style.backgroundPosition="top";
        }
        function bottomleft(){
            document.body.style.backgroundPosition="bottom left";
        }
        function centerright(){
            document.body.style.backgroundPosition="center right";
        }
    </script>
</body>
</html>

Position using Percentage

In the following example, we have used percentage to position the background image.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML DOM Style Object backgroundPosition Property</title>
    <style>
        body {
            background: #f3f3f3 url('/html/images/logo.png') no-repeat;
            height: 300px;
            width: 300px;
        }
    </style>
</head>
<body>
    <p>Click to change positioning.</p>
    <button onclick="fun()">Change</button>
    <script>
        function fun(){
            document.body.style.backgroundPosition="74% 80%";
        }
    </script>
</body>
</html>

Position using Pixels

In the following example, we have used pixels to position the background image.

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

Supported Browsers

Property
backgroundPosition	Yes 1	Yes 12	Yes 1	Yes 1	Yes 3.5

html_dom.htm

Print Page