CSS background-origin Property Explained

The CSS background-origin property determines the positioning area of a background image, defining the exact coordinate origin where the image begins rendering. This article covers how background-origin interacts with the CSS box model, breaks down its three core values—border-box, padding-box, and content-box—and explains the critical difference between positioning an image and clipping it.

What Is the background-origin Property?

In CSS, every rendered element consists of concentric boxes: the content area, the padding area, the border area, and the margin area. When you apply a background image using background-image, the browser needs a reference coordinate—an (x: 0, y: 0) point—to decide where the top-left corner of that image sits before any background-position offsets are calculated.

The background-origin property specifies which box within the element serves as this starting coordinate.

Syntax and Values

The background-origin property accepts three keyword values:

.element {
  background-origin: padding-box; /* default */
  background-origin: border-box;
  background-origin: content-box;
}

1. padding-box (Default)

When set to padding-box, the coordinate origin (0, 0) is placed at the upper-left corner of the element's padding area.

• The background image renders underneath the padding.
• If the element has a border, the image starts inside the inner edge of that border unless background-position pushes it outward.

2. border-box

When set to border-box, the coordinate origin (0, 0) shifts to the upper-left corner of the element's outer border.

• The background image begins directly beneath the border.
• If the border is semi-transparent, dotted, or dashed, the background image will be visible behind the border itself.

3. content-box

When set to content-box, the coordinate origin (0, 0) is confined to the upper-left corner of the content area.

• The background image excludes both the border and the padding areas.
• The image aligns strictly with the text, child elements, or inner content of the container.

How background-origin Affects background-position

The background-origin property directly influences how background-position coordinates are calculated. For example, consider the following rule:

.card {
  width: 300px;
  height: 200px;
  padding: 20px;
  border: 10px dashed #333;
  background-image: url('logo.svg');
  background-repeat: no-repeat;
  background-position: 10px 10px;
  background-origin: content-box;
}

In this example, background-position: 10px 10px measures 10 pixels down and 10 pixels right from the content box, ignoring the 20px padding and 10px border. If the value were changed to border-box, the exact same position offset would measure 10 pixels from the outer edge of the border.

background-origin vs. background-clip

It is common to confuse background-origin with background-clip:

• background-origin controls placement: It defines the reference point where the image's coordinate space starts.
• background-clip controls visibility: It determines the boundary where the background is painted or cut off, regardless of where it originates.

You can use both properties together. For instance, setting background-origin: content-box with background-clip: border-box will calculate the image's starting coordinates relative to the content area, but will allow repeated tiles or oversized images to draw all the way out to the border edge.