background-origin Description:
The background-origin property determines the position of a background relative to one of three parts of the box. You can use this property when layering multiple background images to change where the various images are placed in the box.
background-origin in CSS Versions:
background-origin Syntax:
background-origin: box;
Box has the values:
padding-box(default)
A background positioned at0,0will start painting in the upper left of the padding box.border-box
A background positioned at0,0will start painting in the upper left of the border box.content-box
A background positioned at0,0will start painting in the upper left of the content box.
background-origin Initial Value:
padding-box
background-origin Applies To:
All elements.
background-origin Inheritance:
This property is not inherited.
background-origin Browser Support:
- Android 2.2+
- Chrome 4+
- Firefox 3.6 (with
-moz-prefix) and 4+ - Internet Explorer 9+
- iOS Safari 4+
- Opera 10.0/10.1 (with
-oprefix) and 10.5+ - Opera Mini 5.0+
- Opera Mobile 10.0+
- Safari 5+
background-origin Examples:
See the background-origin examples.
Position relative to the border.
p {
background-image: url("images/dog.jpg");
background-origin: border-box;
}
Position relative to the content box:
p {
background-image: url("images/dog.jpg");
background-origin: content-box;
}
background-origin Special Notes:
- If the
background-attachmentproperty is set tofixed, thebackground-originwill have no effect. Instead, the positioning area will be the initial container. - If
background-clipis set topadding-boxandbackground-originis set toborder-box, the position is the default value oftop left, and the element has a non-zero border, then the top and left of the image will be clipped.
