background-origin属性用于指定背景图像的原点（左上角）位置相对于元素的位置。

background-origin属性和其它CSS背景属性结合使用时会得到不同的效果，例如属性和background-repeat属性。

当设置属性为fixed时，该属性将被忽略不起作用。

在CSS中一个元素有3个区域，我们通常称为盒模型。在盒模型中存在有：border box（边框区域），padding box（补白区域）和content box（内容区域）。另外，还存在第4个区域margin box（边距区域），它用于指定元素外边距。

默认情况下，元素的背景图像的原点被设置在padding box（补白区域）的左上角位置。

如果一个元素有多个背景图片，那么可以为这个元素设置多个background-origin属性，多个background-origin属性之间使用逗号来分隔，并且和每张背景图片一一对应。

官方语法

background-origin: <box> [ , <box> ]*
<box> = padding-box | border-box | content-box                           
                            

参数：

• padding-box：背景将会延伸到外边框，边框在上，背景在下，（通过border-style为dashed可以直接看得出来，也可以降低边框的透明度来查看效果）。
• padding-box：背景会渲染在padding box区域，边框里不会有背景出现。背景将会延伸到最外边界的padding。
• content-box：背景会渲染在content box内容区域范围。

background-origin属性的初始值为padding-box。

例如下面的CSS语法都是正确的：

background-origin: border-box
background-origin: padding-box
background-origin: content-box

background-origin: inherit                              
                            

下面的示例代码将背景图像填充在元素的内容区域。

.el {
   border: 10px double;
   padding: 10px;
   background: url('image.jpg');
   background-position: center left;
   background-origin: content-box;
}                              
                            

下面的示例代码为多个背景图像设置不同的background-origin属性。

.el {
  background-image: url('1.jpg'), url('2.png');
  background-position: top right, 0px 0px;
  background-origin: content-box, padding-box;
}                             
                            

适用范围

background-origin属性可以使用在所有元素上。

在线演示

第一个例子中的background-origin属性设置为：border-box。可以看到透明的红色边框下面的背景图像。

第二个例子中的background-origin属性设置为：padding-box。这是默认值。可以看到背景图像的原点（左上角位置）从paading box区域的左上角位置开始。

第三个例子background-origin属性设置为：content-box。可以看到背景图片的左上角从content box区域的左上角位置开始。

浏览器支持

background-origin属性的浏览器兼容性可以查看。