background-origin

Summary

Specifies what the background-position property is relative to.

Overview table

Initial value: padding-box
Applies to: All elements
Inherited: No
Media: visual
Computed value: as specified
Animatable: No
CSS Object Model Property: backgroundOrigin
Percentages: N/A

Syntax

background-origin: border-box
background-origin: content-box
background-origin: padding-box

Values

padding-box: Default. The position is relative to the padding box.
border-box: The position is relative to the border box.
content-box: The position is relative to the content box. Useful for having background images automatically follow the padding.

Examples

<style>
/**
 * Background-origin Example
 */
.border-box {
  background-origin: border-box;
}
.content-box {
  background-origin: content-box;
}
.padding-box {
  background-origin: padding-box;
}
div {
  display: inline-block;
  margin: 10px;
  width: 100px;
  height: 60px;
  background-color: hsl(0,50%,90%);
  padding: 20px;
  border: 10px solid black;
  background-origin: border-box;
  background-image: url("/docs/w/skins/webplatform/images/logo.svg");
  background-repeat: no-repeat;
}
</style>

<div class="border-box">Border box!</div>
<div class="padding-box">Padding box!</div>
<div class="content-box">Content box!</div>

[live example View live example]

Usage

 You should understand the CSS Box Model before using this property.  Use this in conjunction with background-image and optionally background-position.   See background position for information about the coordinate system and positioning.

Notes

Remarks

For elements rendered as a single box, the background-origin property specifies the background positioning area. For elements rendered as multiple boxes (for instance, inline boxes on several lines or boxes on several pages), this property specifies which boxes determine the background positioning areas. If the background-attachment value for this image is fixed, then the background-origin property has no effect. In this case, the background positioning area is the initial containing block. In Windows Internet Explorer 9, the background of a box can have multiple layers. The number of layers is determined by the number of comma-separated values in the background-image property. Each of the images is sized, positioned, and tiled according to the corresponding value in the other background properties (background-attachment, background-clip, background-origin, background-position, background-repeat, and background-size). The first image in the list is the layer closest to the user, the next one is painted behind the first, and so on.

Related specifications

CSS Backgrounds & Borders Level 3: W3C Candidate Recommendation

Attributions

Mozilla Developer Network : Article
Microsoft Developer Network: [Windows Internet Explorer API reference Article]