在CSS2.1中，背景圖像應用到一個容器會保留他們的固定的尺寸。
現在，CSS3增加了一個background-size屬性允許拉伸（伸縮）或擠壓背景圖片。
background-size:100% 90px;
這個屬性挺好用的。
讓背景圖片的高和寬與其所在容器的高和寬保持一致或對應的百分比。
<div class="bg-size">背景圖片大小被拉伸（寬度100%，高度80px）</div>
.bg-size{ width:200px; height: 300px; background:url(http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg) no-repeat; background-size:100% 90px; }
這樣一來，背景圖片的高度就可以保持為90px，而寬度則和div的寬度呈100%的關系。
可代替之前的做法：<div><img src="path/to" style="width: xxpx; height: xxpx"></div>
而這種做法太不優雅。
順帶介紹下它的其它幾個屬性：
background-size: contain || cover || initial || inherit || auto
50% auto:相當於等比例縮放，當width、height都是auto時，即為原始圖片大小，當有一方固定時，則另一個維度按比例自適應調節，都是以容器的大小為基准進行縮放
縮放到最大大小
contain：將會在width、height上調整到適合於容器，即，圖像會收縮或拉伸，但寬高不會超過容器的寬高，可能寬度占滿容器，但高度沒有，或者相反。
填充背景
cover：這個主要有一點要和contain區分開來，圖像會縮放以覆蓋整個容器的大小，如果長寬比例不相同，它將會裁剪圖片.
多個背景
在CSS3中background 將會支持多個背景圖像，那么相應的background-size也支持同時對多個背景圖的控制，中間用逗號隔開。
background:url(images/htmlface.png) no-repeat 50% 50%,
url(images/htmlface.png) no-repeat 100% 10%,
#EA7629 url(images/mdnface.png) no-repeat 0 100%;
background-size:100px 100px,10%,contain;
瀏覽器兼容性
很幸運的background-size最新版本的所有瀏覽器都支持，並且不需要前綴（-moz-、-webkit-等廠商前綴）；
IE8及以下瀏覽器版本，暫時不支持這個屬性；
簡寫方式注意：
W3C組織在CSS3關於background簡寫的定義中，background-size是定義在background-position后面的，
但是目前沒有任何一個瀏覽器支持這一寫法，
所以我們必須將它單獨寫出來。
原文：How to Resize Background Images with CSS3