This page is Ready to Use

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.

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

See also

Related articles

Background

Attributions