Background Origin Property
Last updated: 2026-09-13
background-origin Background Origin Property
background-origin sets the reference area for background image positioning, determining the baseline of background-position. The default padding-box positions the background relative to the padding area, border-box relative to the border area, and content-box relative to the content area. It is often used together with background-clip.
| Category | |
|---|---|
| Initial Value | padding-box |
| Inherited | No |
| Applies To | |
| Animation Type | |
| CSS Version | CSS3 |
| Status | Standard |
📝 Syntax
background-origin: border-box | padding-box | content-box;⚙️ Values
| Value | Type | Description |
|---|---|---|
border-box | padding-box | content-box | Keyword | Background positioning origin |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| background-origin | ✓ v4 | ✓ v12 | ✓ v4 | ✓ v3.1 | ✓ v10 |
| Supported in all major browsers | |||||
Tip： background-origin affects where a background image starts, but not the area it is painted over.
Tip： When background-attachment: fixed, background-origin is ignored because the background is positioned relative to the viewport.
❓ FAQ
QHow do background-origin and background-clip work together?
Aorigin decides which box the background image is positioned from, while clip decides how far the background is painted; they are independent and can be set separately. For example, background-origin: content-box; background-clip: border-box; positions the image from the content area but paints it out under the border. A common combination is setting both to the same value so the background displays fully from its origin.
QWhat is the default value of background-origin?
AThe default is padding-box, meaning the background image is positioned from the top-left corner of the padding area (the padding edge). This differs from background-clip's default of border-box, which is the main reason the two are often confused. When background-attachment: fixed, origin is ignored because the background is then positioned relative to the viewport.
QWhen does background-origin have no visible effect?
AThree cases: when the image has no explicit background-position and stays at the default 0% 0%, you need a border to see any difference; when background-attachment: fixed it is ignored; and it does nothing with only a background color (origin affects only images). To see the effect, add a border plus a no-repeat background image and switch between the three values.
QWhat do the three values of background-origin mean?
Aborder-box: the image is positioned from the border area's top-left corner and can extend under the border. padding-box (default): it is positioned from the padding area's top-left corner, so no image appears under the border. content-box: it is positioned from the content area's top-left corner, so the image sits within the content area. Together with background-position, these values let you align a background image to any part of the box.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
