CSS Background Origin

CSS Background Origin

The CSS background-origin property determines which part of an element's box is used as the positioning area for a background image.

An element can contain a content area, padding, and border. The background-origin property lets you position a background image relative to the border box, padding box, or content box.

The Background Positioning Area

The background-origin property does not simply move a background image by a fixed amount. It changes the box that the browser uses when positioning and sizing the background image.

The property accepts three box values:

padding-box

The initial value of background-origin is padding-box. The background image is positioned relative to the padding box.

.box {
  background-image: url("images/leaves-400x400.png");
  background-repeat: no-repeat;
  background-origin: padding-box;
}

The image begins at the outside edge of the padding area when the background position is at its default top-left position. The element's border lies outside this positioning area.

border-box

The border-box value uses the border box as the background positioning area.

.box {
  background-image: url("images/leaves-400x400.png");
  background-repeat: no-repeat;
  background-origin: border-box;
}

With the default background position, the image begins at the outside edge of the border box. A transparent or dashed border can make the background image underneath the border area easier to see.

content-box

The content-box value uses only the content box as the background positioning area.

.box {
  background-image: url("images/leaves-400x400.png");
  background-repeat: no-repeat;
  background-origin: content-box;
}

The background image begins at the content edge rather than at the border or padding edge. Increasing the element's padding therefore creates more visible distance between the border and the image's starting position.

Comparing background-origin Values

The three values correspond directly to parts of the CSS box model.

These boxes determine the area used to position the background image. They do not by themselves determine how far the background is painted.

Background Origin and Position

The background-position property positions an image within the area established by background-origin.

.box {
  background-image: url("images/leaves-400x400.png");
  background-origin: content-box;
  background-position: right bottom;
  background-repeat: no-repeat;
}

In this example, right bottom refers to the right and bottom edges of the content box because background-origin is set to content-box.

Background Origin and Size

Percentage-based background-size values are calculated relative to the background positioning area established by background-origin.

.box {
  background-image: url("images/landscape-1200x800.jpg");
  background-origin: content-box;
  background-size: 100% auto;
  background-repeat: no-repeat;
}

Here, the background image is sized to 100% of the width of the content box rather than the padding or border box.

Background Origin vs Background Clip

background-origin and background-clip control different parts of a background.

background-origin determines the positioning area used for a background image. background-clip determines how far an element's background is allowed to be painted.

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

These properties can use different box values at the same time. The next tutorial covers background-clip in detail.

Background Origin Example

The following example uses three boxes with the same padding, border, background image, and image size. Only the background-origin value changes.

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

Compare where the leaves begin in each box. The border and generous padding make the three positioning areas easy to distinguish.