CSS background-origin Property

What You’ll Learn

The background-origin property defines the background positioning area. It controls whether a background image is positioned relative to the border, padding, or content box of an element.

Definition and Usage

The background-origin CSS property sets the background positioning area of a background image. In other words, it decides which box is used as the reference frame for properties like background-position and background-size.

This is especially useful when an element has visible padding or borders and you want a small icon, badge, or decorative background placed relative to a specific part of the box.

📝 Syntax

Apply background-origin to an element that already has a background-image:

selector {

  background-origin: <box>;

}

Basic Example

.box {

  padding: 20px;

  border: 20px solid #333;

  background-image: url("pattern.svg");

  background-repeat: no-repeat;

  background-origin: content-box;

}

Syntax Rules

• The initial value is padding-box.
• Accepted values are border-box, padding-box, and content-box.
• It affects the positioning area, not necessarily the painted clipping area.
• Use it together with background-position and background-size for precise placement.
• Compare it with background-clip, which controls where the background is painted.

Default Value

The initial value of background-origin is padding-box. That means the background positioning area starts at the outer edge of the padding, just inside the border.

💎 Property Values

These are the three background-origin keywords beginners use most often.

background-origin vs background-clip

Examples Gallery

Try background-origin with content-box, padding-box vs border-box, background-position, and a three-value comparison.

.box {

  padding: 20px;

  border: 12px solid #334155;

  background-image: radial-gradient(circle, #f97316 0 36px, transparent 37px);

  background-repeat: no-repeat;

  background-size: 80px 80px;

  background-origin: content-box;

}

.padding-box { background-origin: padding-box; }

.border-box { background-origin: border-box; }

.panel {

  padding: 24px;

  border: 10px dashed #64748b;

  background-image: linear-gradient(135deg, #a855f7, #ec4899);

  background-repeat: no-repeat;

  background-size: 64px 64px;

  background-position: bottom right;

  background-origin: content-box;

}

.border-box { background-origin: border-box; }

.padding-box { background-origin: padding-box; }

.content-box { background-origin: content-box; }

💡 Best Practices