css設置全屏背景圖，background-size 屬性

在寫主題樣式的時候經常會碰到用背景圖鋪滿整個背景的需求，這裡分享下使用方法

需要的效果

1. 圖片以背景的形式鋪滿整個屏幕，不留空白區域
2. 保持圖像的縱橫比（圖片不變形）
3. 圖片居中
4. 不出現滾動條
5. 多瀏覽器支持

以圖片bg.jpg為例

最簡單，最高效的方法 CSS3.0

歸功於css3.0新增的一個屬性background-size，可以簡單的實現這個效果，這裡用fixed和center定位背景圖，然後用background-size來使圖片鋪滿，具體css如下

1. -webkit-background-size: cover;
2.   -moz-background-size: cover;
3.   -o-background-size: cover;
4.   background-size: cover;

適用於以下瀏覽器

• Safari 3+
• Chrome
• IE 9+
• Opera 10+ (Opera 9.5 支持background-size屬性 但是不支持cover)
• Firefox 3.6+

低版本瀏覽器不支持 。