The background-origin CSS property sets the background positioning area, i.e., the origin position of an image specified using the background-image property.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Note that background-origin is ignored when background-attachment is fixed.
background shorthand resets the value of this property to its initial value if it's left unspecified.Syntax
/* 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;
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>#
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
| Specification | Status | Comment |
|---|---|---|
| CSS Backgrounds and Borders Module Level 3 The definition of 'background-origin' in that specification. |
Candidate Recommendation | Initial definition. |
| Initial value | padding-box |
|---|---|
| Applies to | all elements. It also applies to ::first-letter and ::first-line. |
| Inherited | no |
| Media | visual |
| Computed value | as specified |
| Animation type | discrete |
| Canonical order | the unique non-ambiguous order defined by the formal grammar |
Browser compatibility
The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
| Feature | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| Basic support | 11 | 12 | 42 3 | 94 | 10.5 | 31 |
content-box | 1 | 12 | 42 | 95 | 10.5 | 31 |
| Feature | Android webview | Chrome for Android | Edge mobile | Firefox for Android | Opera Android | iOS Safari | Samsung Internet |
|---|---|---|---|---|---|---|---|
| Basic support | 4.1 | Yes | Yes | 14 | 12.1 | Yes | Yes |
content-box | 4.1 | Yes | Yes | 14 | 12.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. Firefox supported, from version 1 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.