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.
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 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 |
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>#
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
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 | Firefox | Edge | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| Basic Support | 1.01 | 4.02 3 | 12 | 9.04 | 10.5 | 3.01 |
content-box | 1.0 | 4.02 | 12 | 9.05 | 10.5 | 3.01 |
| Feature | Android | Chrome for Android | Edge mobile | Firefox for Android | IE mobile | Opera Android | iOS Safari |
|---|---|---|---|---|---|---|---|
| Basic Support | 4.1 | (Yes) | (Yes) | 14.0 | 7.1 | 12.1 | (Yes) |
content-box | 4.1 | (Yes) | (Yes) | 14.0 | 7.1 | 12.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.