CSS background-origin Property

Definition and Usage

The background-origin property sets the background positioning area. That is the box used when background-position and background-size place a background-image. Choose the border edge, the padding edge, or the content edge.

The initial value is padding-box. The property is not inherited. It applies to every element, including ::first-letter and ::first-line. With several images, list one keyword per layer. Origin is ignored when background-attachment is fixed.

CSS Syntax

For multiple images, write a comma list such as content-box, padding-box. Each keyword matches one image in the same order.

Property Values

How to Use background-origin

Give the box a border or padding, place a smaller image, then choose which edge that image is measured from.

1. Set a background-image. Origin only changes where that image is positioned from.
2. Add a thick border and/or clear padding so the three boxes are easy to tell apart.
3. Use background-repeat: no-repeat, a modest background-size, and background-position: left top so the shift is visible.
4. Set background-origin on that element. It is not inherited.

Live Preview

A dashed border, padding, and a blue circle at the top left. Change background-origin and watch where the circle starts.

CSS Examples

Each snippet adds only what background-origin needs: a border, padding, a small image, and the keyword. Use Try It Yourself for a live editor.

<style>
  div {
    padding: 24px;
    border: 12px dashed #64748b;
    background-color: #f1f5f9;
    background-image: radial-gradient(circle, #2563eb 0 28px, transparent 29px);
    background-repeat: no-repeat;
    background-size: 64px 64px;
    background-position: left top;
    background-origin: padding-box;
  }
</style>

<div>Content area</div>

<style>
  div {
    padding: 24px;
    border: 12px dashed #64748b;
    background-color: #f1f5f9;
    background-image: radial-gradient(circle, #2563eb 0 28px, transparent 29px);
    background-repeat: no-repeat;
    background-size: 64px 64px;
    background-position: left top;
    background-origin: border-box;
  }
</style>

<div>Content area</div>

<style>
  div {
    padding: 24px;
    border: 12px dashed #64748b;
    background-color: #f1f5f9;
    background-image: radial-gradient(circle, #2563eb 0 28px, transparent 29px);
    background-repeat: no-repeat;
    background-size: 64px 64px;
    background-position: left top;
    background-origin: content-box;
  }
</style>

<div>Content area</div>

Key Takeaways