先前曾分享，透過CSS3內的屬性，在不用寫任何的程式碼，就可完成全背景縮放的效果「CSS3實現自動縮放全螢幕背景」 ，以往這都需要透過js來作判斷與計算，才能將圖片縮到指定的範圍內，現在透過CSS3的屬性設定後，自動就會依照區塊進行縮放，但在全螢幕背景的屬性中，有二個設定值可作控制，分別為Contain、Cover，雖然都是全螢幕背景，效果卻大不同，現在就一塊來看看二者的差異吧！
background-size: contain;
contain：依照原來的比例，等比的縮放到指定的元素的尺寸中。
#範例預覽：
當設成contain，底圖就會依照區塊的大小，等比縮放到區塊中，這邊不滿的地方則會留白。
background-size: cover;
cover：無論如何，都會將畫面居中撐滿。
#範例預覽：
由於區塊比例與圖片不同時，當畫面撐滿時，有些地方則會被卡掉。
[範例預覽] [範例下載]