MDN wants to learn about developers like you:

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.

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.
Computed valueas specified
Animation typediscrete
Canonical orderthe unique non-ambiguous order defined by the formal grammar



The background extends to the outside edge of the border (but underneath the border in z-ordering).
No background is drawn below the border (background extends to the outside edge of the padding).
The background is painted within (clipped to) the content box.

Formal syntax


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


 .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;


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

Browser compatibility

FeatureChromeFirefoxEdgeInternet ExplorerOperaSafari
Basic Support1.014.02 3129.0410.53.01
FeatureAndroidChrome for AndroidEdge mobileFirefox for AndroidIE mobileOpera AndroidiOS Safari
Basic Support4.1(Yes)(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.