Background Origin

CSS background-origin Property

The CSS background-origin property specifies where the background image is positioned.

This property can have one of the following values:

• padding-box - The background image starts from the top-left corner of the padding edge. This is default
• border-box - The background image starts from the top-left corner of the border edge
• content-box - The background image starts from the top-left corner of the content edge

Note: This property has no effect if the background-attachment property is set to "fixed".

The following example illustrates the background-origin property:

Example

  #div1 {
  border: 2px solid black;
  padding: 35px;

  background-image: url(img_flwr.gif);
  background-repeat: no-repeat;

  background-origin: padding-box;
}

#div2 {
  border: 2px solid black;

  padding: 35px;
  background-image: url(img_flwr.gif);

  background-repeat: no-repeat;
  background-origin: border-box;
}

#div3 {
  border: 2px solid
  black;
  padding: 35px;
  background-image: url(img_flwr.gif);

  background-repeat: no-repeat;
  background-origin: content-box;
}

CSS Advanced Background Properties