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.

Note: The background shorthand resets the value of this property to its initial value if it's left unspecified.

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-origin property is specified as one of the keyword values listed below.


The background is positioned relative to the border box.
The background is positioned relative to the padding box.
The background is positioned relative 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;
  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;


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

Browser compatibility

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic Support1.01124.02 39.0410.53.01
FeatureAndroidChrome for AndroidEdge mobileFirefox for AndroidIE mobileOpera AndroidiOS Safari
Basic Support4.1 (Yes) (Yes) (Yes)
content-box4.1 (Yes) (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.

See also