background-image属性用于为元素设置一个或多个背景图像，多个背景图像使用逗号来分隔。

background-image属性用于为某个元素设置一个或多个背景图像，各个背景图像以堆叠的方式逐张放置在元素的上面。在各个背景图像层中，第一个图像层最接近屏幕前的观察者。

元素的边框会被绘制在背景图像的上面，而元素的（背景颜色）则会被绘制在所有背景图像的下面。背景图像会根据指定的属性和background-origin属性来在盒模型中绘制图像。

在某些情况下，元素设置了多个背景图像的时候，一些背景图像层会有透明的区域，这时在它底部的背景图像就可以被看见。

当我们只为元素设置了一个背景图像的时候，应该为元素设置一个背景颜色，这样在背景图像无效的时候，会使用背景颜色来替代。当背景图像可用的时候，背景图像会覆盖在背景颜色的上面。

官方语法

background-image: <image> | none                             
                            

参数：

• ：使用设置元素的背景图像。多个背景图像使用逗号分隔。
• none：元素不设置背景图像。如果之前为元素设置了背景图像，使用该参数会删除背景图像。

background-image属性的初始值为none。

例如下面的为元素设置背景图像的CSS代码都是正确的：

background-image: none;
background-image: url(images/example.png);
background-image: inherit;                              
                            

可以使用SVG作为元素的背景图像：

 body { 
    background-image: url("marble.svg");
}                             
                            

可以为元素设置多个背景图像：

.bg { 
    background-image: url(first.png), url(second.png);
}                              
                            

另外还可以使用background-repeat属性来重复背景图像：

.module { 
    background-image: url(pattern.png);
    background-repeat: repeat;
}                               
                            

适用范围

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

在线演示

下面是一个使用多重背景图像的例子：这个例子中有两张背景图片，一张是天空背景，另一张是氢气球的透明PNG图片。

下面的例子为元素设置一个背景图片，并使背景图片在X和Y轴方向上重复平铺。

浏览器支持

所有的现代浏览器都支持背景图像。包括：Chrome, Firefox, Safari, Opera, IE 和 Android 和 iOS。

支持背景图像使用SVG格式的浏览器有：

支持多重背景图像的浏览器有：

如果浏览器不支持多重背景，会忽略背景图像的声明，此时不会有背景图像被渲染。你可以为旧的浏览器使用来提供回退方法。当浏览器不支持多重背景时，为它提供一个单一的背景图像。下面是通过Modernizr来提供回退的示例代码：

.element { 
    background-image: url(first.png), url(second.png);
}

/* 当浏览器不支持多重背景是设置一个单一的背景图像 */
.no-multiplebgs .element {
    background-image: url(fallback.jpg);
}