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

backgroundPositionX style property

Browser support:
Specifies or returns the horizontal coordinate of the backgroundImage relative to the upper-left corner of the container object.
This property is not supported by all browsers, so use backgroundPosition property instead wherever you can.

Syntax:

object.backgroundPositionX;
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-x

Possible values:

The type of this property is string.
 One of the following values: 
center
Background is horizontally centered.
left
Background is aligned to the left.
position in length
The horizontal position of the background in length units. For the supported length units, see the length page.
position in percentage
The horizontal position is the specified percentage of the width of the object.
right
Background is aligned to the right.
Default: 0%.

Example HTML code 1:

This example illustrates the use of the background-position-x property:
<head>
    <style>
        .example {
            background-image: url("bg.jpg");
            background-repeat: no-repeat;
            width: 200px;
            height: 200px;
            border:1px solid #CCCCCC;
            background-position-y: center;
        }

        .left {
            background-position-x: left;
        }

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

    <div class="example right">
        The image is at the right of this division. 
    </div>
</body>
Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the backgroundPositionX 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 selects = document.getElementsByTagName ("select");

            // Returns the selected elements
            var selectStates = [];
            for (var i=0; i < selects.length; i++) {
                var whichSelected = selects[i].selectedIndex;
                selectStates.push (selects[i].options[whichSelected].text);
            }

            var div = document.getElementById ("myDiv");

            if ('backgroundPositionX' in div.style) {
                div.style.backgroundPositionX = selectStates[0];
                div.style.backgroundPositionY = selectStates[1];
            } else {
                div.style.backgroundPosition = (selectStates[0] + " " + selectStates[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