background属性总结，background-image路径问题相对于css和js

（1）background属性总结

background 简写属性在一个声明中设置所有的背景属性。

可以设置如下属性：
background-color规定要使用的背景颜色。
background-position规定背景图像的位置。
background-size规定背景图片的尺寸。
background-repeat规定如何重复背景图像。
background-origin规定背景图片的定位区域。

background-origin: padding-box|border-box|content-box;边框盒、内边距框、内容框。

background-clip规定背景的绘制区域。

background-clip: border-box|padding-box|content-box;边框盒、内边距框、内容框。

background-attachment规定背景图像是否固定或者随着页面的其余部分滚动。
background-image规定要使用的背景图像。

如果不设置其中的某个值，也不会出问题建议使用复合属性，background: #00FF00 url(bgimage.gif) no-repeat fixed top;在一个声明中设置所有的背景属性。而不是分别使用单个属性，因为这个属性在较老的浏览器中能够得到更好的支持，而且需要键入的字母也更少。
（2）background-image属性图片的相对路径图片路径问题

图片路径可以是绝对路径、根相对路径和文档相对路径

绝对路径是包括服务器协议的完全路径，比如“百度主页”，完全路径为：http://www.baidu.com/index.htm，如果所要链接当前站点之外的文档，就必须使用绝对路径。

相对路径包括根相对路径（Site Root）和文档相对路径（Document）两种。

根相对路径（也称相对跟目录）的路径以“/”开头，路径是从当前站点的根目录开始计算。

文档相对路径就是指包含当前文档的文件夹，也就是以当前网页所在文件夹为基础开始计算路径。
background-image属性主要用来设置或检索对象的背景图像，其值有none和url，none表示无背景图像，url为背景图像的地址，url可以用相对地值或绝对地址
.bg {background-image: url(images/abc.gif);}
.bg {background-image: url(http://www.mzwu.com/images/abc.gif);}

当使用相对地址时，相对地址和css是内联还是外联是有关系的,
注意：相对路径的时候，在css和js中引用图片的相对路径的基准是不一样的。在css中出现的相对路径，是以css文件所在路径为基准的，而js中的路径则是以导入此js的网页文件所在的位置为基准的。

所以在css中当使用内联css时，相对地址为图像相对于htm文件的地址；当使用外联css时，相对地址应为图像相对于css文件的地址！

eg:

index.html
images/n.png
style/css.css
当使用内联方式时，用background-image设置index.htm中的对象的背景图像代码为：
<style type="text/css">
.bg {background-image: url(images/n.png);}
</style>
.bg {background-image: url(images/n.png);}移到css.css文件中，改用外联的方式调用：
<link href="style/css.css" rel="stylesheet" type="text/css" />
必须改为.bg {background-image: url(../images/n.png);}
css.css内容.bg {background-image: url(images/n.png);}并移到images文件夹下，修改外联css地址再做测试：
.bg {background-image: url(n.png);}

再举个例子：eg:

/index.html

/js/app.js

/css/style.css

/images/bk1.jpg、bk2.jpg
style.css代码
#content{background:url(../images/bk1.jpg) no-repeat;width:200px;height:200px;margin:auto;}
url(../images/bk.jpg)路径是相对于style.css的。
app.js代码
document.getElementById('content').style.backgroundImage='url(images/bk2.jpg)';
url(images/bk2.jpg)路径是相对于index.html的，而不是app.js的url(../images/bk.jpg)。