設置背景圖片的大小，以長度值或百分比顯示（數值包括 長度length和百分比percentage），還可以通過cover和contain來對圖片進行伸縮。
語法：background-size: auto | <長度值> | <百分比> | cover | contain
bg-size = [ <length> | <percentage> | auto ]{1,2} | cover | contain
並且會根據背景原點位置 background-origin 設置其圖片覆蓋的范圍。
取值說明：
1、auto：默認值，不改變背景圖片的原始高度和寬度；
length，percentage，根據給定長度值或者百分比來調整背景圖片大小，第一個值為設置圖片寬度，第二個值為圖片的高度，但是不管是用什么值，都不能為負值；
這三個值最小可重復一次，最大重復兩次。
假如只給定一個值，那么第二個自動的為 'auto'；
假如指定為 percentage百分比值，那么背景圖大小是根據相對的背景區域來做調整，這個背景區域是由background-origin來來決定的。這里有必要提到 假如background-attachment:fixed，那么其背景相對區域就是初始包含塊也就是視窗。
/* 一個值: 這個值指定圖片的寬度，那么第二個值為auto */
background-size: auto
background-size: 50%
background-size: 3em
background-size: 12px
/* 兩個值: 第一個值指定圖片的寬度，第二個值指定圖片的高度 */
background-size: 50% auto
background-size: 3em 25%
background-size: auto 6px
background-size: auto auto
/*多重背景，請用逗號隔開，在CSS語法中凡語法后跟*或者#，都是可以無限重復的，但是必須用逗號隔開。 */
background-size: auto, auto /* 不要跟background-size: auto auto混淆了 */
background-size: 50%, 25%, 25%
background-size: 6px, auto, contain
background-size: inherit
2、<長度值>：成對出現如200px 50px，將背景圖片寬高依次設置為前面兩個值，當設置一個值時，將其作為圖片寬度值來等比縮放；
3、<百分比>：0％~100％之間的任何值，將背景圖片寬高依次設置為所在元素寬高乘以前面百分比得出的數值，當設置一個值時同上；
4、cover：顧名思義為覆蓋，即將背景圖片等比縮放以填滿整個容器；
按比例調整背景圖片，這個屬性值跟contain正好相反，背景圖片會按照比如自適應鋪滿整個背景區域。假如背景區域不足以包含背景圖片的話，那么背景圖片就會被咔嚓。
例如1
.im-com{ width:200px; height:50px; background:url(http://img.xiaoho.com/mystar/mada4.jpg) no-repeat top left scroll; /*圖片的寬高為440*440，而元素相對區域高度為50*/ background-size:cover; } .im-com-1{ width:50px; height:100px; background:url(http://img.xiaoho.com/mystar/mada4.jpg) no-repeat top left scroll; /*元素相對區域寬度為50*/ background-size:cover; }
當使用了cover這個值的時候，那么正好就跟contain相反，其會正好覆蓋整個背景相對區域，但是背景圖片的某些部分就看不見，如下圖的狗的下半身和右側身體顯示不全。
例如2：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>背景圖片大小</title>
<style type="text/css">
.demo {
background: url(http://static.mukewang.com/static/img/logo_index.png) no-repeat;
width: 300px;
height: 140px;
border: 1px solid #999;
background-size:cover;
}
</style>
</head>
<body>
<div class="demo">
</div>
</body>
</html>
5、contain：容納，即將背景圖片等比縮放至某一邊緊貼容器邊緣為止。
contain，按比例調整背景圖片，使得其圖片寬高比自適應整個元素的背景區域的寬高比，因此假如指定的圖片尺寸過大，而背景區域的整體寬高不能恰好包含背景圖片的話，那么其背景某些區域可能會有空白。看以下代碼
.im-com{
width:200px;
height:50px;
background:url(http://img.xiaoho.com/mystar/mada4.jpg) no-repeat top left scroll;
/*圖片的寬高為440*440，而元素相對區域高度為50*/
background-size:contain;
}
.im-com-1{
width:50px;
height:100px;
background:url(http://img.xiaoho.com/mystar/mada4.jpg) no-repeat top left scroll;
/*元素相對區域寬度為50*/
background-size:contain;
}
當圖片恰好自適應鋪滿元素的寬度或者高度，那么元素的會有空白處存在，也就是圖中紅色框框都顯示了空白。
說說背景圖片計算值
假如說只是拿單一的數值或者具體數值來解釋那理解起來應該不難，但假如用混合長度來說，可能會有點一下子明白不上來。
規范給了幾個例子，不妨拿出來一下：先聲明，所以的元素尺寸為 100*100
100% 100%背景圖片將鋪滿整個內容區，假如說元素有固有寬高，那么背景圖片鋪滿整個100*100背景區域
div {
background-image: url(plasma.png);
background-repeat: no-repeat;
background-size: 100% 100%;
background-origin: content-box }
背景圖片調整為寬度為50*50，但是背景圖片的原點位置為邊框box而不是padding-box
p {
background-image: url(tubes.png);
background-size: 50% auto;
background-origin: border-box }
背景圖片尺寸調整為15*15
para {
background-size: 15px 15px;
background-image: url(tile.png)}
這是默認值，也就是auto auto，此時背景圖片的尺寸將會是跟圖片的固有尺寸一樣.
body {
background-size: auto; /* 默認值 */
background-image: url(flower.png) }
假如兩個都是百分比，此時圖片就會根據背景區域來按照寬高比自適應，此處背景圖片為20*30，但是因為背景重復用了 'round'循環，因此背景區域高度划分了3個33.3等高區域，所以背景圖片會自適應調整為20*33.3
p {
background-image: url(chain.png);
background-repeat: no-repeat round;
background-size: 20% 30% }
在MND幫助文檔中還提到了關於火狐的漸變圖片背景問題，不過那是涉及到Firefox8，規范中不推薦同時使用px和auto，因為在8以前的火狐瀏覽器不支持重復渲染，但是我在caniuse上看見的版本是31+，so，你就盡情的用吧。並且對於移動瀏覽器的支持還是非常的好的，請看下圖可知，除了opera8部分不支持以外：
應用場景
目前用到 background-size的場景都是基於webapp的背景圖上，大致的情況是，比如說最常見的logo作為某個元素的背景，但logo很復雜，假如說我們按照設計圖上的去切片的話，那會有兩種可能：
1、按照csser的分辨率去切片，比如高度為50px，logo被直接縮放到50px那就會很別扭，而且估計那那畫面太美，你都不敢看；
2、按照射擊濕設計的分辨率去切的話，有可能設計圖的logo尺寸會很大，但是我們csser寫的時候高度只有50px，那logo就會顯示不全；
這時候background-size就發揮其重要的作用了，我們可以通過對背景圖片大小的自適應縮放，而不會影響到起美觀性又能全部顯示我們所需要的效果。