background-origin用来规定元素背景图像的相对定位位置，它有三个属性值：
1、border-box
border-box表示元素背景图像相对于border区域开始定位。
代码如下：
<!doctype html> <html> <head> <style> *{margin:0;padding:0;} .box{width:430px;height:280px;margin:100px auto;background:url("fengjing.jpg") no-repeat;padding:5px;border:5px dotted #000;font-size:100px;font-weight:bold;background-origin:border-box;] </style> </head> <body> <div class="box "></div> </body> </html>
效果如下：
从上图可以看出,元素的背景图像从边框区域开始定位。
2、padding-box
padding-box表示元素背景图像相对于padding区域开始定位。
代码如下：
<!doctype html> <html> <head> <style> *{margin:0;padding:0;} .box{width:430px;height:280px;margin:100px auto;background:url("fengjing.jpg") no-repeat;padding:5px;border:5px dotted #000;font-size:100px;font-weight:bold;background-origin:padding-box;] </style> </head> <body> <div class="box "></div> </body> </html>
效果如下：
从上图可以看出：元素背景图像从padding区域开始定位。
3、content-box
content-box表示元素背景图像相对于content区域开始定位。
代码如下：
<!doctype html> <html> <head> <style> *{margin:0;padding:0;} .box{width:430px;height:280px;margin:100px auto;background:url("fengjing.jpg") no-repeat;padding:5px;border:5px dotted #000;font-size:100px;font-weight:bold;background-origin:content-box;] </style> </head> <body> <div class="box "></div> </body> </html>
效果如下：
从上图可以看出：元素的背景图像初始位置从content区域开始定位。
总结，background-origin属性定义了背景图像的相对定位位置，这个位置可以用background-position来改变，而且元素背景图像的区域不会因此被限定住，只对元素背景图像起作用。如果元素使用background-attachment属性时，该属性会失效。