background-origin

The background-origin CSS property sets the background positioning area, i.e., the origin position of an image specified using the background-image property.

/* Keyword values */
background-origin: border-box;
background-origin: padding-box;
background-origin: content-box;

/* Global values */
background-origin: inherit;
background-origin: initial;
background-origin: unset;

Note that background-origin is ignored when background-attachment is fixed.

Syntax

The background-origin property is specified as one of the keyword values listed below.

Values

border-box

The background is positioned relative to the border box.

padding-box

The background is positioned relative to the padding box.

content-box

The background is positioned relative to the content box.

Formal syntax

<box>#
where 
<box> = border-box | padding-box | content-box

Examples

.example {
  border: 10px double;
  padding: 10px;
  background: url('image.jpg');
  background-position: center left;
  background-origin: content-box;
}

#example2 {
  border: 4px solid black;
  padding: 10px;
  background: url('image.gif');
  background-repeat: no-repeat;
  background-origin: border-box;
}

div {
  background-image: url('logo.jpg'), url('mainback.png'); /* Applies two images to the background */
  background-position: top right, 0px 0px;
  background-origin: content-box, padding-box;
}

Specifications

Browser compatibility

See also

• background-clip