想達到全螢幕的背景圖
並且還要隨著視窗的大小跟著縮放~
可以利用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>