CSS background-origin Property

Example

Let the background-image start from the upper left corner of the content:

#example1 {
  border: 10px dashed blue;
  padding: 25px;
  background: url(blue.jpg);
  background-repeat: no-repeat;
  background-origin: content-box;
}

Definition and Usage

The background-origin property specifies the origin position (the background positioning area) of a background image.

It is same as background-clip property, which specifies the area to which background color will be applied.

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

Default value:	padding-box
Inherited:	no
Animatable:	no
Version:	CSS3
JavaScript syntax:	object.style.backgroundOrigin="content-box"

• Inherited : "Inherited = no" means that it cannot takes (inherit) it's value from it's parent element.
• object - object in javascript means the element on which background-origin is applied.
• Animatable - "Animatable = no" means that it cannot be animated with CSS @keyframes.

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
background-origin	4.0	9.0	4.0	3.0	10.5

CSS Syntax

background-origin: padding-box|border-box|content-box|initial|inherit;

Property Values

Value	Description	Demo
padding-box	Default value. The background image starts from the upper left corner of the padding edge
border-box	The background image starts from the upper left corner of the border
content-box	The background image starts from the upper left corner of the content
initial	Sets this property to its default value.
inherit	Inherits this property from its parent element.

More Examples

Example

Set two background images for a <div> element. Let the "blue.jpg" background image starts from the upper left corner of the padding edge, and let the "img_rose.png" background image starts from the upper left corner of the content:

#example1 {
  border: 10px dashed black;
  padding: 25px;
  background: url(img_rose.png), url(blue-jpg);
  background-repeat: no-repeat;
  background-origin: content-box, padding-box;
}