background-size語法
w3c對background-size的語法規定如下：
| 屬性名: | background-size |
|---|---|
| 屬性值: | <bg-size>* 其中 bg-size = [ <length> | <percentage> | auto ]{1,2} | cover | contain |
| 初始值: | auto auto |
| 應用于: | 所有元素 |
| 繼承性: | 無 |
| 百分比: | 見下文注解 |
| 計算值: | 根據指定 |
語法解釋
1、length，percentage，根據給定長度值或者百分比來調整背景圖片大小。auto為默認值，這三個值最小可重復一次，最大重復兩次。對于這些值有以下解釋：
第一個值為設置圖片寬度，第二個值為圖片的高度；但是不管是用什么值，都不能為負值
假如只給定一個值，那么第二個自動的為 '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: inherit1234567891011121314151617代碼laycode - v1.1
2、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;
}1234567891011121314代碼laycode - v1.1當圖片恰好自適應鋪滿元素的寬度或者高度，那么元素的會有空白處存在，也就是圖中紅色框框都顯示了空白。
2、cover，按比例調整背景圖片，這個屬性值跟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: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;
}1234567891011121314代碼laycode - v1.1 當使用了 cover 這個值的時候，那么正好就跟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% }123456789101112131415161718192021222324252627代碼laycode - v1.1在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就發揮其重要的作用了，我們可以通過對背景圖片大小的自適應縮放，而不會影響到起美觀性又能全部顯示我們所需要的效果。