CSS Background Origin

background-origin decides which edge of the box -- the outer border, the padding, or just the content -- a background image's positioning is measured from.

In this page:

The Three Origin Values
Why Origin Matters with a Visible Border
Origin Interacts with background-position
Origin vs background-clip
Practical Use Cases

The Three Origin Values

background-origin: border-box positions the background relative to the outer edge of the border; padding-box (the default) positions it relative to the inner edge of the border, i.e. the outside of the padding; content-box positions it relative to the edge of the content area, inside the padding.

Example: The Three Origin Values

css

<style>
.box {
  border: 10px dashed red;
  padding: 10px;
  background-image: url('https://placehold.co/60x60');
  background-repeat: no-repeat;
  background-origin: border-box;
}
</style>
<div class="box">border-box: background starts under the border</div>

Why Origin Matters with a Visible Border

When an element has a border, background-origin: border-box lets the background image extend underneath the border area, while padding-box (the default) keeps the image starting just inside the border -- the visual difference is most obvious with a thick or dashed border and a positioned background image.

Example: Why Origin Matters with a Visible Border

css

<style>
.box {
  border: 10px dashed black;
  background-image: url('https://placehold.co/80x80');
  background-repeat: no-repeat;
  background-origin: border-box;
}
</style>
<div class="box">Image extends underneath the dashed border</div>

Origin Interacts with background-position

background-position values like top left or 10px 10px are measured from whichever box background-origin specifies -- changing origin without changing position can visibly shift where the image appears, since the position's reference point moved.

Example: Origin Interacts with background-position

css

<style>
.box {
  border: 10px solid black;
  padding: 10px;
  background-image: url('https://placehold.co/40x40');
  background-repeat: no-repeat;
  background-position: top left;
  background-origin: content-box;
}
</style>
<div class="box">Position measured from the content box, not the border</div>

Origin vs background-clip

background-origin controls where the image's positioning starts; background-clip (a separate property) controls where the image is cut off / becomes invisible -- they're often set to matching values but solve different problems and can be combined for specific effects.

Example: Origin vs background-clip

css

<style>
.box {
  border: 10px dashed red;
  background-image: url('https://placehold.co/80x80');
  background-origin: border-box;
  background-clip: padding-box;
}
</style>
<div class="box">Origin starts under the border, clip cuts it off there</div>

Practical Use Cases

background-origin is mostly relevant when an element has both padding and a border and a positioned (not tiled/cover) background image needs to align precisely with one of those box edges rather than another -- for purely tiled patterns or cover-sized photos, the default rarely needs changing.

Example: Practical Use Cases

css

<style>
.box {
  border: 8px solid #333;
  padding: 12px;
  background-image: url('https://placehold.co/40x40');
  background-repeat: no-repeat;
  background-position: top right;
  background-origin: content-box;
}
</style>
<div class="box">Positioned icon aligns precisely with the content edge</div>

🔒

Chapter Quiz — Complete all 21 topics to unlock

0/21 topics done

Complete these topics first:

← Previous Lesson CSS Background Size Next Lesson → CSS Background Clip