CSS 'background-origin' Property Explained

The CSS 'background-origin' property specifies the origin position of the background image(s). The origin is the initial positioning area of the background images before they are placed and sized according to background position and background size. Essentially, it determines which part of the box model (the border box, padding box, or content box) is the positioning reference for the background image. It does not decide where the background is painted or cut off: that is the job of background-clip.

CSS 'background-origin' Property Examples

See the Pen CSS 'background-origin' Property by Webzstore (@webzstore) on CodePen.

The 'background-origin' property offers significant flexibility in how background images are integrated into an element's overall design, allowing for nuanced control over their positioning and presentation in relation to the box model.

Origin versus clipping: background-origin only sets the reference box used for background-position and for sizing percentages. Where the background is actually painted, and where it is cut off, is controlled separately by background-clip, whose initial value is border-box. For example, with background-origin: content-box and the default background-clip, a non-repeating image starts at the content edge, while a repeating image can still tile into the padding and under the border. Per MDN, background-origin is ignored when background-attachment is fixed.

.card {
  border: 10px dashed #333;
  padding: 20px;
  background-image: url("pattern.png");
  background-repeat: no-repeat;
  background-origin: content-box; /* image starts at the content edge */
  background-clip: border-box;    /* paint area is unchanged (the default) */
}

Browser Support For 'background-origin' Property

Source: MDN browser-compat-data 8.1.4, checked 3 October 2026. Prefixed support and implementations that were later removed are not counted, and some browsers list partial support or extra values. See the MDN reference for background-origin for the full compatibility details, including mobile browsers.

CSS Syntax of the 'background-origin' Property

background-origin: border-box | padding-box | content-box | initial | inherit;

Usage of the 'background-origin' Property

Use 'background-origin' when you need precise control over where your background images begin within an element's box. It's particularly useful in designs where the background needs to align tightly with the content, padding, or border areas, affecting how backgrounds integrate with the page's overall layout and visual hierarchy.

Property Values of the 'background-origin' Property

• Border-box: The background image is positioned relative to the border box, so its origin is the outer edge of the border.
• Padding-box: The background image is positioned relative to the padding box, so its origin is the outer edge of the padding (the inner edge of the border). This is the initial value.
• Content-box: The background image is positioned relative to the content box, so its origin is the inner edge of the padding.
• Initial: Sets the property to its initial value, padding-box, resetting any earlier declaration.
• Inherit: Inherits the background-origin property from the element's parent, ensuring consistency within nested elements.