CSS background-position-y

The background-position-y property in CSS allows you to set the vertical position of a background image. It works in conjunction with the background-image property to control the positioning of the background image within its containing element.

The background-position-y property takes a length, a percentage, or one of the following keywords as its value:

top: Aligns the top of the image with the top of the element.
center: Aligns the center of the image with the center of the element.
bottom: Aligns the bottom of the image with the bottom of the element.

When using a length or percentage value, the position is relative to the top of the element's padding box.

Examples

Example 1: Using keywords


    .background {
      background-image: url('image.jpg');
      background-position-y: top;
      background-repeat:no-repeat;
      height: 200px;
    }

Result:

This is an element with a background image aligned to the top.

Example 2: Using percentage


    .background {
      background-image: url('image.jpg');
      background-repeat:no-repeat;
      background-position-y: 50%; /* Aligns the center of the image vertically */
    }

Result:

This is an element with a background image aligned at the vertical center.

Experiment with different values for the background-position-y property to see how it affects the positioning of the background image within the element. Remember that the position is relative to the top of the padding box.