CSS background属性是背景属性的简写方式，用于集中设置各种背景属性。
background 属性可以为多个背景图层设置背景，各个背景图层之间使用逗号来分隔。
background: [ <bg-layer> , ]* <final-bg-layer>
每一个背景图层都可以指定不同的，，，, ， 和 属性。
<bg-layer> = <bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box>{1,2}
每一个背景层的各个背景属性都会被设置为它们的初始值，然后再根据 background 属性指定的值来覆盖相应的属性值。也就是说，除了给定的属性值，其它属性值使用它们的默认值。
例如下面的一个例子，在这个例子中只为元素的 background 属性设置了属性。
.element {
background: fixed;
}
上面为元素设置背景的声明相当于：
.element {
background-color: transparent; /* 初始值 */
background-position: 0% 0%; /* 初始值 */
background-size: auto auto; /* 初始值 */
background-repeat: repeat repeat; /* 初始值 */
background-clip: border-box; /* 初始值 */
background-origin: padding-box; /* 初始值 */
background-attachment: fixed; /* 声明的值 */
background-image: none; /* 初始值 */
}
当使用 background 属性为元素设置多个图层时，由于整个元素只能够有一个背景颜色，因此，属性要声明在最后面一个图层的结束位置。
<final-bg-layer> = <bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box>{1,2} || <background-color>
<box> 有3个可选的值： padding-box 、 content-box 和 border-box （具体参考属性）。
属性和属性都是设置盒模型 box 的值，那么在 background 简写方式中如何区分它们呢？
如果在 background 简写方式中只有一个 <box> 值，那么属性和属性的值都被设置为该 <box> 值。如果在 background 简写方式中给出了2个 <box> 值，那么第一个会被设置为属性的值，第二个会被设置为属性的值。
官方语法
background: [ <bg-layer> , ]* <final-bg-layer>
/* 其中 */
<bg-layer> = <bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box>{1,2}
/* 其中 */
<final-bg-layer> = <bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box>{1,2} || <background-color>
参数： <background-image> ：参考。 <background-position> ：参考 <background-size> ：参考。 <background-repeat> ：参考。 <background-origin> ：参考。 <background-clip> ：参考。 <background-attachment> ：参考。 <background-color> ：参考。
background 属性的初始值为：
background-image: none background-position: 0% 0% background-size: auto auto background-repeat: repeat background-origin: padding-box background-clip: border-box background-attachment: scroll background-color: transparentbackground 属性的各个值的顺序是可以随意的，唯一的要求是属性必须在属性之后，并且它们之间使用“/”符号来分隔。
除非你指定了属性，否则在 background 属性中指定的属性无效。
示例代码下面的代码使用 background 属性为元素设置背景。
.element {
background: #eee urlimage.jpg) top 50% / contain fixed no-repeat;
}
上面的声明等效于：
.element {
background-image: url(image.jpg);
background-color: #eee;
background-position: top 50%;
background-size: contain;
background-repeat: no-repeat;
background-attachment: fixed;
background-origin: padding-box; /* 初始值 */
backgrounnd-clip: border-box; /* 初始值 */
}
再来看一个例子：
div {
background: padding-box url(image.jpg) deepPink center center;
}
/* 等价于 */
div {
background-color: deepPink;
background-image: url(image.jpg);
background-repeat: repeat; /* 初始值 */
background-attachment: scroll; /* 初始值 */
background-position: center center;
/* 只声明了一个<box>值，所以background-origin和background-clip属性都使用该值 */
background-clip: padding-box;
background-origin: padding-box;
background-size: auto auto;
}
下面是使用 background 属性设置多个背景层的例子：
.element {
background: url(a.png) top left no-repeat,
url(b.png) center / 100% 100% no-repeat,
url(c.png) white;
}
上面的声明等价于：
.element {
background-image: url(a.png), url(b.png), url(c.png);
background-position: top left, center, top left;
background-repeat: no-repeat, no-repeat no-repeat, repeat;
background-clip: border-box, border-box, border-box;
background-origin: padding-box, padding-box, padding-box;
background-size: auto auto, 100% 100%, auto auto;
background-attachment: scroll, scroll, scroll;
background-color: white;
}
在线演示
下面的例子使用 background 属性来设置元素的背景属性。
.container{
width: 700px;
height: 400px;
margin: 50px auto;
background: url(img/colin.png) 70% 20% / 128px 128px no-repeat,
url(img/bg-1.jpg) top left / cover no-repeat #006699;
}
浏览器支持
所有的现代浏览器都支持 background 属性，包括 Chrome, Firefox, Safari, Opera, IE以及 Android 和 iOS。