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

backgroundPositionY style property

A A

Font size

Browser support:

Specifies or returns the vertical-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.backgroundPositionY;

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

This property is read/write.

CSS page for this element: background-position-y

Possible values:

The type of this property is string.

One of the following values:

bottom

Background is aligned to the bottom.

center

Background is vertically centered.

position in length

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

position in percentage

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

top

Background is aligned to the top.

Default: 0%.

Example HTML code 1:

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

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

        .top {
            background-position-y: top;
        }

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

    <div class="example bottom">
        The image is at the 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 backgroundPositionY property:

<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>
        function ChangeBgPos () {
            var selects = document.getElementsByTagName ("select");

            // Returns the selected elements
            var selectStates = new Array ();
            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 (div.style.backgroundPositionX !== undefined) {
                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 onClick="ChangeBgPos ();" size="3">
        <option selected="selected" />center
        <option />left
        <option />right
    </select>
    <select onClick="ChangeBgPos ();" size="3">
        <option />bottom
        <option />center
        <option selected="selected" />top
    </select>
</body>