想達到全螢幕的背景圖

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

可以利用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: progidXImageTransform.Microsoft.AlphaImageLoader(src='image/bg.jpg', sizingMethod='scale'); 
-ms-filter: "progidXImageTransform.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>

 

九五二七

作者/九五二七

愛漫畫愛遊戲愛上網愛星爺,小時摸到阿羅士與AppleII後註定宅一輩子,從紅白機到PS4,從386到Xeon,沒日沒夜的打電動;待過所有宅產業,從光華到NOVA,從遊戲到動漫,從攝影器材到網路電信,喜愛學習多於睡覺,無時無刻散發一股宅味,但號稱長的像梁朝偉XD
覺得這篇文章讚嗎?