Summary

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.

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

If the value of this property is not set in a background shorthand property that is applied to the element after the background-origin CSS property, the value of this property is then reset to its initial value by the shorthand property.

Initial valuepadding-box
Applies toall elements. It also applies to ::first-letter and ::first-line.
Inheritedno
Mediavisual
Computed valueas specified
Animation typediscrete
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Syntax

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

background-origin: inherit;

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

Specification Status Comment
CSS Backgrounds and Borders Module Level 3
The definition of 'background-origin' in that specification.
Candidate Recommendation Initial definition

Browser compatibility

Feature Chrome Edge Firefox Internet Explorer Opera Safari Servo
Basic Support1.01124.02,39.0410.53.01?
content-box1.0124.029.0510.53.01?
Feature Android Chrome for Android Edge Mobile Firefox for Android IE Mobile Opera Mobile Safari Mobile
Basic Support4.1(Yes)(Yes)14.07.112.1(Yes)
content-box4.1(Yes)(Yes)14.07.112.1(Yes)

1. Webkit also supports the prefixed version of this property, and in that case, in addition to the current keywords, the alternative synonyms are: padding, border, and content.

2. Gecko supported, from version 1.1 to version 1.9.2, which corresponds to Firefox 1.0 to 3.6 included, a different and prefixed syntax: -moz-background-clip: padding | border.

3. Since Firefox 49, also supports the -webkit prefixed version of the property.

4. In IE 7 and before, Internet explorer was behaving as if background-origin: border-box was set. In Internet Explorer 8, as if background-origin: padding-box, the regular default value, was set.

5. In IE 7 and IE 9 of Internet Explorer, it always behaved like background-clip: padding if overflow: hidden | auto | scroll.