CSS background-position-y Property

Definition and Usage

The background-position-y property sets the vertical starting place of each background-image. The place is measured inside the area from background-origin. Horizontal place stays as it is, or you set it with background-position-x.

The initial value is 0% (top). The property is not inherited. A later background or background-position declaration overrides it. Pair it with background-repeat: no-repeat when you want one clear marker.

CSS Syntax

Separate multiple images with commas. The keyword comes before a side offset: bottom 20px, not 20px bottom.

Property Values

How to Use background-position-y

Give the element an image, keep one copy visible, then set only the vertical place.

1. Set a background-image on the element. Without an image, there is nothing to place.
2. Give the element a visible size. Content or a height is enough.
3. Use background-repeat: no-repeat when you want one image, not a tile.
4. Set background-position-y for the vertical place. Use background-position-x if you also need the horizontal place.

Live Preview

One blue marker, kept horizontally centered. Change background-position-y and watch it move up and down.

CSS Examples

Each snippet adds only what background-position-y needs: an image, a sized box, and no-repeat so the mark is clear. Use Try It Yourself for a live editor.

<style>
  div {
    height: 160px;
    border: 1px solid #ccc;
    background-color: #eff6ff;
    background-image: radial-gradient(circle, #2563eb 0 28px, transparent 29px);
    background-repeat: no-repeat;
    background-size: 72px 72px;
    background-position-x: center;
    background-position-y: center;
  }
</style>

<div></div>

<style>
  div {
    height: 160px;
    border: 1px solid #ccc;
    background-color: #ecfdf5;
    background-image: radial-gradient(circle, #059669 0 28px, transparent 29px);
    background-repeat: no-repeat;
    background-size: 72px 72px;
    background-position-x: center;
    background-position-y: 25%;
  }
</style>

<div></div>

<style>
  div {
    height: 160px;
    border: 1px solid #ccc;
    background-color: #fff7ed;
    background-image: radial-gradient(circle, #ea580c 0 28px, transparent 29px);
    background-repeat: no-repeat;
    background-size: 72px 72px;
    background-position-x: center;
    background-position-y: bottom 20px;
  }
</style>

<div></div>

Key Takeaways