The background-origin property controls the background positing area, which determines where the offset for background are calculated from.

Syntax:

selector {

      background-origin: padding box;

}

Values:

The background-origin property has three main values, orientated according to the box model. These are:

  • padding-box - It is a default value position. The background is positioned relative to the padding box; or in other word it positions the background to the outer edge of the padding and also the inner edge of the border.
  • border-box - The background is positioned relative to the border box; or in other words it positions the background to the outer edge of the border depending on the width of your border, this change can be very subtle.
  • content-box - The background is positioned relative to the content box; or in other words it positions the background to the edge of the content, or the inner edge of the padding.
  • initial or inherit
NOTE: If the background-attachment property for the background image is "fixed", this property has no effect.

Example

Example with background-origin property set to the padding-box, border-box and content-box:

 

›› go to examples ››