Get my e-book focusing on CSS3 and
modern web UI development.
dig into web UI development
Last modified: 27. 2. 2016
This property determines where to position the axis for calculating sizes and
positions of other properties, such as
background-position, within a
content-box– starts from the element content
padding-box(default) – starts from the element padding edge
border-box– starts from the element padding edge but counts in the element
Tip: The differences among the
values are illustrated in the box-sizing section of this
background-origin property is ignored by the browser if the
background-attachment: fixed declaration is used.
Everyone gets confused by this so let’s shed some light on it:
Background Clip determines whether the background
color or image is visible under a border (
border-box) or only around the
content only (
Background Origin does not do anything on its own - it just defines an area
where other properties apply (e.g. background-size
Again, there is no support for these properties in IE8. See caniuse.com/background-origin.
Neither polyfills nor the
filter property workaround are available for this
property. The only thing to do is to ignore this property in IE8 or detect it
and come up with an alternative solution for older browsers.