background-origin
The background-origin CSS property sets the background starting position relative to the border and padding of an element.
Overview
The background-origin CSS property sets the background starting position relative to the border and padding of an element.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 4 | 3 | 18 | 1 | |
border-box | 1 | 12 | 4 | 3 | 18 | 2 |
content-box | 1 | 12 | 4 | 3 | 18 | 1 |
padding-box | 1 | 12 | 4 | 3 | 18 | 2 |
background-origin Values of `background-origin` longhand | 21 | 12 | 22 | 5.1 | 25 | 4 |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 2 item(s)
Compatibility
- Available with a vendor prefix: -webkit- (1)
Implementation note
- Chrome accepts alternate synonyms to its values: `padding`, `border`, and `content`.
Notes 2 item(s)
Compatibility
- Available with a vendor prefix: -webkit- (12)
Implementation note
- Since Edge 79, accepts alternate synonyms to its values: `padding`, `border`, and `content`.
Notes 5 item(s)
Compatibility
- Available with a vendor prefix: -webkit- (49)
- Available with a vendor prefix: -moz- (1)
Limitation
- This browser only partially implements this feature
Removed
- This feature was removed in a later browser version (4)
Implementation note
- Used the `-moz-background-clip: padding | border` syntax.
Notes 2 item(s)
Compatibility
- Available with a vendor prefix: -webkit- (3)
Implementation note
- Webkit accepts alternate synonyms to its values: `padding`, `border`, and `content`.
Notes 2 item(s)
Compatibility
- Available with a vendor prefix: -webkit- (18)
Implementation note
- Chrome Android accepts alternate synonyms to its values: `padding`, `border`, and `content`.
Notes 2 item(s)
Compatibility
- Available with a vendor prefix: -webkit- (1)
Implementation note
- Webkit accepts alternate synonyms to its values: `padding`, `border`, and `content`.
Syntax
CSS
.element {
background-image: url('pattern.png');
background-origin: content-box;
padding: 20px;
}Live demo
Use cases
Using background-origin
The background-origin CSS property sets the background starting position relative to the border and padding of an element.
Cautions
- May not be supported in older browsers.
Accessibility
- Make sure visual changes are conveyed appropriately to assistive technology.
Related links
Powered by web-features