CSS3 Background Origin – Background Image Start

Buy ebook

CSS Mine

Get my e-book focusing on CSS3 and
modern web UI development.

Learn more

This property determines where to position the axis for calculating sizes and positions of other properties, such as background-size or background-position, within a particular element:

  • 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 border as well

Tip: The differences among the content-box, padding-box and border-box values are illustrated in the box-sizing section of this e-book.

Caution! The background-origin property is ignored by the browser if the background-attachment: fixed declaration is used.

Background Clip vs Background Origin

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 (content-box).

Background Origin does not do anything on its own - it just defines an area where other properties apply (e.g. background-size or background-position).

IE8

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.




Content

Introduction

Introduction

On today’s frontend UI development

UI development transformations

Tools, technologies and workflows

Fallback strategies

CSS3 reference guide

Introduction

Text properties

Background properties

Border properties

Box properties

Media Queries

CSS transforms

CSS animations

CSS3 Layout

Another CSS3 Properties

Non-standard properties

End

End

Buy ebook

CSS Mine

Get my e-book focusing on CSS3 and
modern web UI development.

Learn more