background-origin

background-origin chooses the box used to position and size a background image. It does not clip the image to that box; background-clip is a separate painting-boundary setting.

Move a single tile from padding to content

Both boxes have an 8px transparent border and 24px padding. The first tile starts at the padding edge; the second begins at the content edge, farther inward. No-repeat makes the starting point visible.

<div class="sample padding">Padding-box origin</div>
<div class="sample content">Content-box origin</div>

.sample {
  min-height: 70px;
  padding: 24px;
  border: 8px solid transparent;
  background-color: #eff6ff;
  background-image: linear-gradient(#2563eb, #2563eb);
  background-size: 20px 20px;
  background-repeat: no-repeat;
  margin-block: 0.5rem;
}
.padding {
  background-origin: padding-box;
}
.content {
  background-origin: content-box;
}

Position decoration within a padded reading area

The small image aligns to the right of the content box. Inline-end padding leaves visual room for the decoration; the background remains decorative and the note’s meaning is in HTML.

<p class="note">Read the code, then change one value.</p>

.note {
  padding: 1rem 5rem 1rem 1rem;
  background-color: #eff6ff;
  background-image: radial-gradient(circle, #bfdbfe 60%, transparent 62%);
  background-size: 2rem 2rem;
  background-repeat: no-repeat;
  background-origin: content-box;
  background-position: right top;
  min-height: 4rem;
}

Values and defaults

The initial value is padding-box and the property is not inherited. Border-box positions from the border area; padding-box uses the padding area; content-box uses the content area. Multiple images can have comma-separated origins.

Background color does not use origin to determine where it paints. Fixed attachment uses the viewport positioning area and ignores the ordinary origin box. A single box keyword in the background shorthand sets both origin and clip; use longhands when only one should change.

Common mistakes

Content-box origin does not prevent a repeating image from painting into padding. Use background-clip:content-box when that clipping is intended. The old lesson described origin as clipping; the non-repeating comparison here separates the two effects.

Learn padding, border, background-position, and background.

Sources and browser support

MDN: background-origin describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.