background-position-y

Definition

The background-position-y property in CSS specifies the vertical position of a background image. It can be used to position the background image vertically within the element's content, padding, or border.

Examples

Positioning the background image at the top edge of the element:

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

Centering the background image vertically within the element:

.center {
  width: 200px;
  height: 200px;
  background-image: url('image.jpg');
  background-position-y: center;
}

Positioning the background image at the bottom edge of the element:

.bottom {
  width: 200px;
  height: 200px;
  background-image: url('image.jpg');
  background-position-y: bottom;
}

Positioning the background image 50 pixels from the top edge of the element:

.distance {
  width: 200px;
  height: 200px;
  background-image: url('image.jpg');
  background-position-y: 50px;
}

Positioning the background image 50% of the element's height from the top edge:

.percentage {
  width: 200px;
  height: 200px;
  background-image: url('image.jpg');
  background-position-y: 50%;
}

Values

Best Practices

• Use background-position-y to specify the vertical position of a background image.
• The default value for background-position-y is top, which means that the background image is positioned at the top edge of the element.
• Use background-position-y in combination with other background properties, such as background-image, background-color, and background-position-x, to create more complex and customized backgrounds.
• You can specify the position of the background image in pixels, ems, or percentages using the <length> and <percentage> values for background-position-y.
• Use the background-position-y property in conjunction with the background-position-x property to specify the position of the background image in two dimensions.
• Keep in mind that the background-position-y property only affects the positioning of the background image, not the size of the background. To specify the size of the background, use the background-size property.

Browser Compatibility