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

Example Code

css

Try it Yourself

#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

Property	Description
background	A shorthand property for setting all the background properties in one declaration
background-clip	Specifies the painting area of the background
background-image	Specifies one or more background images for an element
background-origin	Specifies where the background image(s) is/are positioned
background-size	Specifies the size of the background image(s)

CSS background-origin Property

Example

Example Code

CSS Advanced Background Properties

Interactive Code Examples

CSS Example 1