CSS - background-position-y Property

Quiz

CSS background-position-y property sets the initial vertical position of the element's background image. The position of the image is relative to the value set by background-origin property.

Syntax

background-position-y: top | center | bottom | length | percentage | initial | inherit;

Property Values

Value	Description
top	Sets the image at the top position.
center	Sets the image at the vertical center position.
bottom	Sets the image to the bottom position.
length	Sets the image at the vertical position with the given length.
percentage	Sets the image at the vertical position in terms of the percentage height.
initial	This sets the property to its initial value.
inherit	This inherits the property from the parent element.

Examples of CSS Background Position Y Property

Below are described some examples of the background-position-y property with different values.

Top,Bottom and Center Positions of Image

To set the image at the top position, we use the top value. To set the image at the bottom, we use the bottom value and to set the image to the vertical center, we use the center value. These are shown in the example below.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        div{
            background-image: url('/https/www.tutorialspoint.com/css/images/tutimg.png');
            background-repeat: no-repeat;
            width: 500px;
            height: 300px;
            position: relative;
            border: 1px solid black;
        }
        .position-y-top {
            background-position-y: top;
        }

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

        .position-y-center {
            background-position-y: center;
        }
    </style>
</head>

<body>
    <h2>CSS background-position-y property</h2>
    <h4>Top Value</h4>
    <div class="position-y-top"></div>
    <h4>Bottom value</h4>
    <div class="position-y-bottom"></div>
    <h4>center value</h4>
    <div class="position-y-center"></div>
</body>

</html>

Position of Image with Length

To position an image using length vertically, we specify the value. This is shown in the example below.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        .position-y-length {
            background-image: url('/https/www.tutorialspoint.com/css/images/tutimg.png');
            background-position-y: 100px;
            background-repeat: no-repeat;
            width: 500px;
            height: 300px;
            border: 3px solid black;
            position: relative;
        }
    </style>
</head>

<body>
    <h2>CSS background-position-y property</h2>
    <div class="position-y-length"></div>
</body>

</html>

Position of Image using Percentage

To position an image along the Y direction, we can also use percentage value. This is shown in the example below.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        .position-y-percent {
            background-image: url('/https/www.tutorialspoint.com/css/images/tutimg.png');
            background-position-y: 80%;
            background-repeat: no-repeat;
            width: 500px;
            height: 300px;
            border: 3px solid black;
            position: relative;
        }
    </style>
</head>

<body>
    <h2>CSS background-position-y property</h2>
    <div class="position-y-percent"></div>
</body>

</html>

Supported Browsers

Property
background-position-y	1.0	12.0	49.0	1.0	15.0

css_reference.htm

Print Page