在CSS中，我们可以使用background-image属性来为元素定义背景图片。

语法：

background-image: url(图片路径);

说明：

跟引入图片（即img标签）一样，引入背景图片也需要给出图片路径才可以显示。

举例：

在线测试
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
       div{background-image: url(img/haizei.png);}
    </style>
</head>
<body>
    <div></div>
</body>
</html>

浏览器预览效果如下图所示。

分析：

怎么回事，为什么背景图片没有显示出来呢？这是因为我们没有给div元素定义width和height，此时div元素的宽度和高度都为0，那背景图片肯定不会显示啊！

我们需要为div元素添加width和height，代码如下：

div
{
    width:250px;
    height:170px;
    background-image: url(img/haizei.png);
}

其中width和height跟图片实际宽度和高度相等，此时在浏览器预览效果如下图所示。

背景图片跟图片是不一样的，背景图片是使用CSS来实现，而图片是使用HTML来实现。两者的使用场合也不一样，大多数情况下都是使用图片来实现，不过某些场合无法使用图片时我们再考虑背景图片形式。

此外还有一点要说明一下：下面这两种引入背景图片的方式都是正确的，一个给路径加上了引号，另外一个没加引号。不过在实际开发中，建议采用不加引号的方式，因为这种方式更加简洁。

/*方式1：路径加上引号*/
background-image: url("img/haizei.png");
/*方式2：路径没加引号*/
background-image: url(img/haizei.png);