CSS background-origin Property CSS background-clip Property

CSS background-origin Property

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

The property takes three different values:

• border-box - the background image starts from the upper left corner of the border
• padding-box - (default) the background image starts from the upper left corner of the padding edge
• content-box - the background image starts from the upper left corner of the content

The following example illustrates the background-origin property:

Example

#example1 {
  border: 10px solid black;
  padding: 35px;
  background: url(img_flwr.gif);
  background-repeat: no-repeat;
  background-origin: content-box;}

Try it Yourself »

---

CSS background-clip Property

The CSS background-clip property specifies the painting area of the background.

The property takes three different values:

• border-box - (default) the background is painted to the outside edge of the border
• padding-box - the background is painted to the outside edge of the padding
• content-box - the background is painted within the content box

The following example illustrates the background-clip property:

Example

#example1 {
  border: 10px dotted black;
  padding: 35px;
  background: yellow;
  background-clip: content-box;}

Try it Yourself »

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)