在CSS3之前，背景圖片的大小是由圖片的實際大小決定的。
在CSS3中，我們可以使用background-size屬性來設置背景圖片的大小，這使得我們可以在不同的環境中重復使用背景圖片。
語法：
background-size:取值;
說明：
background-size取值共有2種，一種是使用長度值（如px、百分比）；另外一種是使用關鍵字。
background-size關鍵字取值如下表：
以下實例都是使用如下圖片作為背景圖片（120px×80px）：
舉例1：background-size取值為長度值
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3 background-size屬性</title>
<style type="text/css">
div
{
width:160px;
height:100px;
border:1px solid red;
margin-bottom:10px;
background-image:url("../App_images/lesson/run_css3/css3.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。
舉例2：background-size取值為關鍵字
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3 background-size屬性</title>
<style type="text/css">
div
{
width:160px;
height:100px;
border:1px solid red;
margin-bottom:10px;
background-image:url("../App_images/lesson/run_css3/css3.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和第3個div，可以看出背景圖片都產生了縮放。當屬性background-size的值為cover時，背景圖像按比例縮放，直到覆蓋整個背景區域為止，但可能會裁剪掉部分圖像。當屬性background-size的值為contain時，背景圖像會完全顯示出來，但可能不會完全覆蓋背景區域。
舉例3：自適應元素大小的背景圖片
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3 background-size屬性</title>
<style type="text/css">
#control
{
margin-bottom:10px;
}
#view
{
border:1px solid red;
width:60px;
height:40px;
background-image:url("../App_images/lesson/run_css3/css3.png");
background-size:cover;
}
</style>
<script src="../App_js/jquery-1.11.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#range_width").change(function () {
var num = $(this).val();
$("#value_width").text(num+"px");
$("#view").css("width", num + "px");
});
$("#range_height").change(function () {
var num = $(this).val();
$("#value_height").text(num+"px");
$("#view").css("height", num + "px");
});
})
</script>
</head>
<body>
<div id="control">
寬度：<input id="range_width" type="range" min="60" max="300" value="60"/><span id="value_width">60px</span><br />
高度：<input id="range_height" type="range" min="40" max="200" value="40"/><span id="value_height">40px</span>
</div>
<div id="view"></div>
</body>
</html>
在浏覽器預覽效果如下：
分析：
這裡使用的背景圖片實際大小為120px×80px。不過由於使用“background-size:cover;”使得不管元素實際寬度和高度如何變化，背景圖片都會自適應元素的大小。
注意：此例子請在火狐浏覽器下測試，否則無法查看動態效果。
疑問1、對於背景圖片，不是可以使用width和height屬性來設置嗎？為什麼還要增加一個background-size屬性呢？
記住，背景圖片不同於img標簽引用的圖片，對於img標簽引用的圖片，我們可以使用width和height屬性來設置，但是這兩個屬性不能用於設置背景圖片的大小。因此，在CSS3中，引入了background-size屬性來設置背景圖片的大小。這裡大家要清楚一點，背景圖片的大小跟一般圖片的大小設置有本質的區別。