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

You are here: Reference > CSS > properties > background-position-y

background-position-y property

Browser support:

Specifies the vertical-coordinate of the background-image relative to the upper-left corner of the container object.

This property is not supported by all browsers, so use background-position property instead wherever you can.

JavaScript page for this property: backgroundPositionY. You can find other example(s) there.

Possible values:

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>