background-origin property CSS Reference



Definition and Usage

The background-origin CSS property determines the background positioning area, that is the position of the origin of an image specified using the background-image CSS property.

Note that background-origin is ignored when background-attachment is fixed.

If the value of this property is not set in a background shorthand property that is applied to the element after the background-origin CSS property, the value of this property is then reset to its initial value by the shorthand property.

  • Initial padding-box
  • Applies to all elements
  • Inherited no
  • Media visual
  • Computed Value as specified
  • Animatable no
  • Canonical order the unique non-ambiguous order defined by the formal grammar

Syntax

Formal syntax: <box>#
background-origin: border-box
background-origin: padding-box
background-origin: content-box
background-origin: inherit

Values

border-box
The background extends to the outside edge of the border (but underneath the border in z-ordering).
padding-box
No background is drawn below the border (background extends to the outside edge of the padding).
content-box
The background is painted within (clipped to) the content box.

Examples

 .example {
border: 10px double;
padding: 10px;
background: url('image.jpg');
background-position: center left;
/* The background will be inside the padding */ 
background-origin: content-box;
}
div {
background-image: url('logo.jpg'), url('mainback.png');
background-position: top right, 0px 0px;
background-origin: content-box, padding-box;
}

Compatibility

Desktop browsers

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 [3] 4.0 (2.0) 9.0 [2] 10.5 3.0 (522) [3]
content-box 1.0 [3] 4.0 (2.0) 9.0 [2] Not supported 3.0 (522) [3]

Mobile browsers

Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support NA NA NA NA NA
content-box NA NA NA NA NA

Relative articles