CSS background-position Property

Definition and Usage

The background-position property sets the starting place of each background-image inside the area chosen by background-origin. One value, two values, or an edge offset can place the image. With several images, list positions with commas in the same order.

The initial value is 0% 0% (top left). The property is not inherited. It applies to every element, including ::first-letter and ::first-line. Pair it with background-repeat: no-repeat when you want to see one placed image instead of a tile.

CSS Syntax

One value implies center for the other axis. With two lengths or percentages, the first is horizontal and the second is vertical. Separate multiple images with commas.

Property Values

How to Use background-position

Give the element an image, stop the tile if you need a clear mark, then set the position.

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 full tile.
4. Set background-position with a keyword, a pair of values, or an edge offset. It is not inherited.

Live Preview

One blue marker. Change background-position and watch where it sits in the box.

CSS Examples

Each snippet adds only what background-position 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: 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: 25% 75%;
  }
</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: bottom 10px right 20px;
  }
</style>

<div></div>

Key Takeaways