在CSS2.1中，我们是不能使用CSS来控制背景图片大小的，背景图片的大小都是由图片实际大小决定。

在CSS3中，我们可以使用background-size属性来定义背景图片的大小，这样可以使得同一张背景图片可以在不同的场景重复使用。

语法：

background-size:取值;

说明：

background-size属性取值有两种：一种是长度值，如px、em、百分比等；另外一种是使用关键字，如下表所示。

background-size关键字取值
属性值 说明
cover 即“覆盖”，表示将背景图片等比缩放来填满整个元素
contain 即“容纳”，表示将背景图片等比缩放至某一边紧贴元素边沿为止

这是一张大小为120px×80px的图片，这一节的例子都使用它作为背景图片。

举例：background-size取值为“长度值”

在线测试
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        div
        {
           width:160px;
           height:100px;
           border:1px solid red;
           margin-top:10px;
           background-image:url(img/battle.png);
           background-repeat:no-repeat;
        }
        #div2{background-size:160px 100px;}
    </style>
</head>
<body>
    <div id="div1"></div>
    <div id="div2"></div>
</body>
</html>

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

分析：

在这个例子中，第1个div元素背景图片大小使用默认值（即图片实际大小），而第2个div元素使用background-size属性重新定义背景图片大小。

其中，background-size:160px 100px;表示定义背景图片的宽度为160px，高度为100px。

举例：background-size取值为“关键字”

在线测试
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        div
        {
           width:160px;
           height:100px;
           border:1px solid red;
           margin-top:10px;
           background-image:url(img/battle.png);
           background-repeat:no-repeat;
        }
        #div2{background-size:cover;}
        #div3{background-size:contain;}
    </style>
</head>
<body>
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
</body>
</html>

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

分析：

在这个例子中，第1个div元素没有使用background-size属性，第2个div元素background-size属性取值为“cover”，第3个div元素background-size属性取值为“contain”。小伙伴们对比理解一下。

常见问题：

1．对于背景图片的大小，不是可以使用width和height这两个属性来定义吗？为什么还要增加一个background-size属性呢？

大家一定要搞清楚，背景图片跟普通图片（即img标签）是不同的东西！width和height这两个属性只能用来定义img标签图片的大小，是不能用于控制背景图片的大小。