In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > style handling > properties > backgroundPosition

backgroundPosition style property

Browser support:

Sets or retrieves the position of the backgroundImage within the element.

Syntax:

object.backgroundPosition;

You can find the related objects in the Supported by objects section below.

This property is read/write.

CSS page for this property: background-position

Possible values:

The type of this property is string.

One of the following values:

•

Values in this order (use the space character to separate them):

horizontal position

One of the following values:

•	<horizontal position in length>
•	horizontal position in percentage
•	left
•	center
•	right

vertical position

One of the following values:

•	<vertical position in length>
•	vertical position in percentage
•	top
•	center
•	bottom

possible but not necessary; left to personal choice

•

Any of the following values (use the space character to separate them, each value can be used only once):

•

horizontal position

One of the following values:

•	left
•	center
•	right

•

vertical position

One of the following values:

•	top
•	center
•	bottom

•

inherit

Description of values:

bottom

Background is aligned to the bottom.

center

Background is centered.

horizontal position in length

The horizontal position of the background in length units. For the supported length units, see the length page.

horizontal position in percentage

The horizontal position is the specified percentage of the width of the object.

inherit

Takes the value of this property from the computed style of the parent element.

left

Background is aligned to the left.

right

Background is aligned to the right.

top

Background is aligned to the top.

vertical position in length

The vertical position of the background in length units. For the supported length units, see the length page.

vertical position in percentage

The vertical position is the specified percentage of the height of the object.

Default: 0% 0%.

If only one value is set and it can be a horizontal position, the vertical position is set to 50%. If the only value cannot be a horizontal position, the horizontal position is set to 50%.

Example HTML code 1:

This example illustrates the use of the background-position property:

<head>
    <style>
        .example {
            background-image: url("bg.jpg");
            background-repeat: no-repeat;
            width: 200px;
            height: 200px;
            border:1px solid #CCCCCC;
        }

        .centerTop {
            background-position: center top;
        }

        .leftBottom {
            background-position: left bottom;
        }
    </style>
</head>
<body>
    <div class="example centerTop" style=" float:right;">
        The image is at the center top of this division. 
    </div>

    <div class="example leftBottom">
        The image is at the left bottom of this division. 
    </div>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the backgroundPosition property in JavaScript:

<head>
    <style>
        .example {
            background-image: url("bg.jpg");
            background-repeat: no-repeat;
            background-position: center top;
            width: 200px;
            height: 200px;
            border:1px solid #CCCCCC;
        }
    </style>

    <script type="text/javascript">
        function ChangeBgPos () {
            var selectTags = document.getElementsByTagName ("select");
            var selectState = [];
            
            for (i = 0; i < selectTags.length; i++) {
                // Returns the index of the selected option
                var whichSelected = selectTags[i].selectedIndex;

                // Returns the text of the selected option
                selectState[i] = selectTags[i].options[whichSelected].text;
            }
            
            var div = document.getElementById ("myDiv");
            div.style.backgroundPosition = selectState[0] + " " + selectState[1];
        }

    </script>
</head>
<body>
    <div class="example" id="myDiv">
        Change the values of the horizontal and vertical image positions.
    </div>

    <br />
    <select onchange="ChangeBgPos ();" size="3">
        <option selected="selected" />center
        <option />left
        <option />right
    </select>
    <select onchange="ChangeBgPos ();" size="3">
        <option />bottom
        <option />center
        <option selected="selected" />top
    </select>
</body>