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: transparent

background属性的各个值的顺序是可以随意的，唯一的要求是属性必须在属性之后，并且它们之间使用“/”符号来分隔。

除非你指定了属性，否则在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。