CSS background-position-y Property

CSS background-position-y Property

The background-position-y property in CSS allows you to control the vertical positioning of a background image within an element.

1. Syntax

selector {
  background-position-y: value;
}

2. Accepted Values

Value	Description
top (default)	The background image aligns to the top of the element.
center	The background image aligns to the vertical center.
bottom	The background image aligns to the bottom.
<length>	Specifies an exact position in px, em, rem, %, etc.
<percentage>	Defines a position relative to the element’s height (e.g., 50% means center).

3. Example – Using background-position-y: center;

.box {
  width: 400px;
  height: 300px;
  background-image: url("image.jpg");
  background-position-y: center;
  background-repeat: no-repeat;
}

✅ The background image will be vertically centered.

4. Example – Using background-position-y: bottom;

.box {
  width: 400px;
  height: 300px;
  background-image: url("image.jpg");
  background-position-y: bottom;
  background-repeat: no-repeat;
}

✅ The background image will be aligned to the bottom.

5. Example – Using Length (px or %)

.box {
  width: 400px;
  height: 300px;
  background-image: url("image.jpg");
  background-position-y: 50px;
  background-repeat: no-repeat;
}

✅ The background image is 50px from the top.

.box {
  width: 400px;
  height: 300px;
  background-image: url("image.jpg");
  background-position-y: 75%;
  background-repeat: no-repeat;
}

✅ The background image is placed 75% down from the top.

6. Best Practices

✔ Use center for balanced positioning in different screen sizes.
✔ Use % values for responsive layouts.
✔ Combine with background-size for better control.