background-origin

Definition

The background-origin property sets the origin position of a background image.

Syntax

.card {
  background-image: url("/img/grid.svg");
  background-origin: content-box;
  padding: 2rem;
}

Values

padding-box: background is painted within the padding edge (default).
border-box: include the border in the painting area.
content-box: clip the background to the content box, ignoring padding.

Practical Examples

.card {
  background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='40' height='40' fill='%23e2e8f0'/%3E%3Cpath d='M0 20h40M20 0v40' stroke='%23cbd5f5' stroke-width='2'/%3E%3C/svg%3E");
  background-origin: content-box;
  padding: 2rem;

Change the origin box to control whether padding or borders influence tiled artwork.

HTML

padding-box (default)

content-box origin

Code

<div class="grid gap-4 sm:grid-cols-2">
  <div class="rounded-xl border-4 border-slate-200 bg-white p-6" style="background: url(&quot;data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='40' height='40' fill='%23f8fafc'/%3E%3Cpath d='M0 20h40M20 0v40' stroke='%23e2e8f0' stroke-width='2'/%3E%3C/svg%3E&quot;) padding-box;">
    <p class="text-sm font-semibold text-slate-700">padding-box (default)</p>
  </div>
  <div class="rounded-xl border-4 border-slate-200 bg-white p-6" style="background: url(&quot;data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='40' height='40' fill='%23f8fafc'/%3E%3Cpath d='M0 20h40M20 0v40' stroke='%230ea5e9' stroke-width='2'/%3E%3C/svg%3E&quot;) content-box; background-clip: padding-box;">
    <p class="text-sm font-semibold text-slate-700">content-box origin</p>
  </div>
</div>

Tips & Best Practices

Pair background-origin with background-clip to fine-tune how borders and padding interact.
Use content-box to keep repeating patterns from peeking under padding.
Remember to adjust padding when switching origins so content spacing stays consistent.

Accessibility & UX Notes

Changes to origin affect visual boundaries only; ensure content areas remain clear and uncluttered.

Browser Support

Supported in all modern browsers including IE9+. Works alongside background-clip for additional control.

background-clip to determine the painting region.
border and padding which influence the boxes involved.
background-repeat when tiling patterns near edges.