background-origin属性是用来确定背景图片在box中的定位。

backgorund-orgin属性有三个取值，分别是：border-box，padding-box和content-box。当取值border-box的时候，背景图片的定位开始于border的左上角；当取值padding-box的时候，背景图片的定位开始于padding的左上角；同理当取值content-box的时候，背景图片的定位开始于content的左上角。

目前支持的浏览器有Firefox、Chrome、Opera和Safari，也就是说除了IE，其它主流浏览器都支持了。不过它们大多数也都需加自己的前缀，比如Firefox需加前缀 -moz-，Webkit内核浏览器需加前缀 -webkit-，Opera需加前缀 -o-。

下面三个例子分别是取值为border-box、padding-box和content-box：

背景图片的起始位置开始于border

背景图片的起始位置开始于padding

背景图片的起始位置开始于content

下面是第一个例子的代码：

.p{
	width:150px;
	height:100px;
	padding:10px;
	border:10px dashed #cad5eb;
	background:#f0f3f9 url(http://jayuh.com/wp-content/uploads/2010/10/background.jpg) no-repeat;
	-moz-background-origin:border;
	-webkit-background-origin:border;
	background-origin:border;
	text-shadow:1px 1px white;
}

本文例子不支持RSS订阅，因为RSS把CSS忽略了。如想看本文的例子，请打开原文地址。