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 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.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
background-origin | Chrome
Full support
1
| Edge Full support 12 | Firefox
Full support
4
| IE
Full support
9
| 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
|
content-box | Chrome Full support 1 | Edge Full support 12 | Firefox Full support 4 | IE
Full support
9
| 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.