CSS background-position-y Property

The background-position-y property in CSS is used to set the vertical position of the background image in the container. This CSS property allows you to move the background image from top to bottom. In the container by default, the background image is situated in the top left corner.

Syntax:

background-position-y: value;

Property Values:

The background-position-y have certain values properties.

• background-position-y: center - It is used to set the image at the center position in the container.
• background-position-y: top - It is used to set the image at the top position in the container.
• background-position-y: bottom - It is used to set the image at the bottom position in the container.
• background-position-y: initial - It is used to set the image at default value. Its default value is 0%.
• background-position-y: inherit - It is used to inherits this property value from its parent elements.

Example:

In this example, The background image will be positioned bottom side in the container.

body {
  background-image: url('images/lion.jpg');
  background-repeat: no-repeat;
  background-position-y: bottom;
}

In this example, The background image will be positioned 30% from top side in the container.

body {
  background-image: url('images/lion.jpg');
  background-repeat: no-repeat;
  background-position-y: 30%;
}

In this example, The background image will be positioned 100px from top side in the container.

body {
  background-image: url('images/lion.jpg');
  background-repeat: no-repeat;
  background-position-y: 100px;
}

Output: