The background-origin
CSS property sets the background's origin: from the border start, inside the border, or inside the padding.
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
.
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 definition
Initial value | padding-box
|
Applies to | all elements. It also applies to ::first-letter and ::first-line .
|
Inherited | no |
Computed value | as specified |
Animation type | discrete |
Formal syntax
<box>#where <box> = border-box | padding-box | content-box
Examples
Setting background origins
.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 3The 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.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
background-origin
|
Chrome Full support 1 Full support 1 No support 1 — 64 Prefixed' Implemented with the vendor prefix: -webkit-
Notes' Chrome accepts alternate synonyms to its values: |
Edge
Full support 12 |
Firefox Full support 4 Full support 4 Full support 49 Prefixed' Implemented with the vendor prefix: -webkit- No support 1 — 4 Prefixed' Implemented with the vendor prefix: -moz-
Notes' Used the |
IE Full support 9 Full support 9 Notes' In IE 7 and before, Internet explorer was behaving as if |
Opera Full support 10.5 Full support 10.5 No support 15 — 51 Prefixed' Implemented with the vendor prefix: -webkit-
Notes' Opera accepts alternate synonyms to its values: |
Safari Full support 3 Full support 3 Full support 3 Prefixed' Implemented with the vendor prefix: -webkit-
Notes' Webkit accepts alternate synonyms to its values: |
WebView Android Full support 4.1 Full support 4.1 No support 4.1 — 64 Prefixed' Implemented with the vendor prefix: -webkit-
Notes' WebView accepts alternate synonyms to its values: |
Chrome Android Full support 18 Full support 18 No support 18 — 64 Prefixed' Implemented with the vendor prefix: -webkit-
Notes' Chrome accepts alternate synonyms to its values: |
Firefox Android Full support 14 Full support 14 Full support 49 Prefixed' Implemented with the vendor prefix: -webkit- |
Opera Android Full support 11 Full support 11 No support 14 — 47 Prefixed' Implemented with the vendor prefix: -webkit-
Notes' Opera accepts alternate synonyms to its values: |
Safari iOS Full support 1 Full support 1 Full support 1 Prefixed' Implemented with the vendor prefix: -webkit-
Notes' Webkit accepts alternate synonyms to its values: |
Samsung Internet Android Full support 1.0 Full support 1.0 No support 1.0 — 9.0 Prefixed' Implemented with the vendor prefix: -webkit-
Notes' Chrome accepts alternate synonyms to its values: |
content-box
|
Chrome
Full support 1 |
Edge
Full support 12 |
Firefox
Full support 4 |
IE Full support 9 Full support 9 Notes' In IE 7 and IE 9 of Internet Explorer, it always behaved like |
Opera
Full support 10.5 |
Safari
Full support 3 |
WebView Android
Full support 4.1 |
Chrome Android
Full support 18 |
Firefox Android
Full support 14 |
Opera Android
Full support 11 |
Safari iOS
Full support 1 |
Samsung Internet Android
Full support 1.0 |
Legend
- Full support
- Full support
- See implementation notes.'
- See implementation notes.
- Requires a vendor prefix or different name for use.'
- Requires a vendor prefix or different name for use.
See also
background-origin by Mozilla Contributors is licensed under CC-BY-SA 2.5.