CSS3 background-size 屬性

CSS3 background-size 屬性的功能是用來設定背景圖片（background-image）的大小，background-size 屬性允許多種背景圖片大小調整方式，例如自訂背景圖片的寬度與高度、根據容器（如 DIV 區塊）大小而調整背景圖片的百分比、將背景圖片放大並填滿整個容器區域或是自動縮小背景圖片的大小使其可以完整呈現於容器的範圍內，以往在 CSS2 之前，要調整背景圖片與 DIV 的大小，通常會直接開繪圖軟體來處理圖片，CSS3 的 background-size 屬性提供網頁設計師更有效率的背景圖片調整方式，已經獲得大多數主流瀏覽器的支援。

CSS3 background-size 屬性語法

background-size: 背景圖片大小;

CSS 的 background-size 屬性調整背景圖片的參數有好幾種設定值，整理如下表所示。

CSS3 background-size 可能的設定值

設定值	說明
auto	預設值，維持背景圖片原本的大小。
length	自訂背景圖片的大小，可以用兩個數字表示，先是設定寬度，再來是設定高度，不可為負數，如果只寫一個數字，第二個數字則會自動設為 auto 的效果，背景圖片自動縮放。
percentage	自訂背景圖片的大小，用兩個數字百分比表示，第一個數字百分比是設定寬度，第二個數字百分比是設定高度，如果只寫一個，則第二個將自動設為 auto 的效果，背景圖片自動縮放。
cover	使用於背景圖片小於容器時，將背景圖片的大小放大至容器的大小並填滿，缺點是如果容器的長寬比例與背景圖片的長寬比例不吻合，會出現背景圖片失真的情況。
contain	使用於背景圖片大於容器時，將背景圖片縮小至可以在容器內呈現。

CSS3 background-size 屬性範例一、使用 length 設定背景圖片寬度與高度

範例的效果

這是使用的背景圖片，尺寸為 300x80

這是修改後的背景圖片，尺寸為 360x80

範例一在一個大小為 360x80 的 DIV 區塊內使用了一個比較小的背景圖片，我們透過 background-size 屬性將背景圖片的寬度加大為 360px，高度則加大為 80px，雖然還沒有到達 DIV 區塊的大小，不過已經可以很明顯得看到原本的背景圖片被加大了。

使用 background-size 的自訂寬度與高度要注意比例的問題，最好自己先算好放大的寬度與高度要設多少，以免背景圖片因為放大後的比例不正確而失真，接著我們來看範例二，如何不用自己設定寬度與高度也能放大背景圖片。

CSS3 background-size 屬性範例二、使用 cover 擴大背景圖片

範例的效果

這是使用的背景圖片，尺寸為 300x80

這是修改後的背景圖片，尺寸為 400x120

範例二使用 background-size 的 cover 效果，不需要像範例一那樣自己設定背景圖片的寬度與高度，讓 cover 的效果直接把背景圖片放大並填滿整個 DIV 區塊，這樣是不是很方便呢？不過缺點是放大的背景圖片比例會根據 DIV 區塊的比例而改變，所以有的時候會有圖片失真的情況，請斟酌使用 cover 效果，範例二的 DIV 區塊比例與原始圖片差不多，所以看起來還蠻正常的。

CSS3 background-size 屬性範例三、使用 contain 擴展背景圖片

範例的效果

這是使用的背景圖片，尺寸為 300x80

這是修改後的背景圖片，尺寸為 200x50

範例三的 DIV 區塊比較小一點，甚至比要使用的背景圖片還要小一點，這個時候我們希望背景圖片還是可以放在整個 DIV 區塊內，而且圖片的花紋不要跑掉，這時候就可以使用 background-size 屬性的 contain 效果，讓背景圖片等比例縮小在 DIV 區塊內。

實際上 contain 效果除了可以縮小背景圖片之外，也可以放大背景圖片，假設範例三的 DIV 區塊比較大，使用 background-size 屬性的 contain 效果就會讓原始圖片等比例放大，同樣呈現在整個 DIV 區塊內。

更多 CSS 背景圖片設計