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): 
1.
horizontal position
 One of the following values: 
<horizontal position in length>
horizontal position in percentage
left
center
right
2.
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>
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>
Did you find this example helpful? yes no

Supported by objects:

Related pages:

External links:

User Contributed Comments

Post Content

Post Content