background-origin

The background-origin CSS property determines the background positioning area, that is the position of the origin of an image specified using the background-image CSS property.

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

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

Syntax

Values

border-box

The background extends to the outside edge of the border (but underneath the border in z-ordering).

padding-box

No background is drawn below the border (background extends to the outside edge of the padding).

content-box

The background is painted within (clipped 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;
   /* The background will be inside the padding */ 
   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'); /* This will apply both images as background */
  background-position: top right, 0px 0px;
  background-origin: content-box, padding-box;
}

Specifications

Browser compatibility