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

  • Initial valuepadding-box
  • Applies toAll elements
  • InheritedNo
  • MediaVisual
  • Computed valueAs specified
  • AnimatableNo
  • CSS VersionCSS3
  • JavaScript syntaxobject.style.backgroundOrigin
Formal syntax: <box> [ , <box> ]* 

background-origin: padding-box;
background-origin: border-box;
background-origin: content-box;
<box> = border-box | padding-box | content-box
  • border-boxThe position is relative to the border box.
  • padding-boxThe position is relative to the padding box.
  • content-boxThe position is relative to the content box. Useful for having background images automatically follow the padding.
.class {
   backround-origin: padding-box;
}
4+Firefox9+Explorer4+Chrome5+Safari10.5+Opera


Last updated on 23rd March 2014 By Rene Spronk

View All CSS Properties

Errors? Please help to keep this list up to date, If you find any errors, please contact us, so that we can get them fixed.