使用CSS2及CSS3實現自動縮放全螢幕背景圖

想達到全螢幕的背景圖

並且還要隨著視窗的大小跟著縮放～

可以利用CSS來達成

而不同瀏覽器支援也有差別

以下範例為CSS2及CSS3的寫法

兩個摻在一起是不是更相容呢？其實我也不知道XD

所以僅供參考

使用語法： CSS2適用瀏覽器：Firefox 3.6+、Chrome 8+、IE 7+、Safari 3+、Opera 10+

<style>
html {
background: url(image/index/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image/bg.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image/bg.jpg', sizingMethod='scale')";
}
</style>

使用語法： CSS3適用瀏覽器：IE9+、Chrome、Firefox、Safari、Oprea

<style>
body {
margin:0;
padding:0;
background: #000 url(image/bg.jpg) center center fixed no-repeat;
-moz-background-size: cover;
background-size: cover;
}
</style>