在Firefox中的全屏幕背景圖像

我有覆蓋瀏覽器屏幕的整個寬度和高度的背景圖像。它在Chrome和IE中工作，但在Firefox中，圖像被壓低。有什麼想法發生了什麼？在Firefox中的全屏幕背景圖像

/* CSS */ 
<style type="text/css"> 

#bg { 
position:fixed; 
top:0; 
left:-50%; 
width:200%; 
height:75%; 
} 
#bg img { 
position:absolute; 
top:0; 
left:0; 
right:0; 
bottom:0; 
margin:auto; 
min-width:50%; 
min-height:50%; 
} 

</style> 

/* HTML */ 
<div id="bg"> 
<img src="http://image.iloqal.com/lib/fe5c1570746107757c1c/m/1/BMW_528_bkg.png" id="back1" alt="" /> 
</div>

來源

2012-02-14 Dandy

我寧願使用CSS3，但對於這個項目我需要使用當前的標準。任何幫助表示讚賞！謝謝！ – Dandy 2012-02-14 14:39:47

查看[這篇文章從CSS技巧]（http://css-tricks.com/perfect-full-page-background-image/）的幾種技術。 – Blazemonger 2012-11-27 16:39:50

賈斯汀首先，根據定義，背景圖像是通過CSS設置的，而不是像你一樣內嵌。所以，第一種解決方案相當簡單：

#bg {background: url("images/yourimage.jpg") no-repeat center fixed;}

它會把你的背景放在中心位置，然後你走了。 #bg充當您的其他內容/標記的包裝。

現在，如果您希望您的背景根據瀏覽器窗口自動調整大小，如果您無法使用CSS3，則無法執行此操作。

PS：請注意，可以假背景通過PHOTOSHOP的很長和寬的圖像，將重複的背景顏色以整個屏幕，並通過背景速記這樣的：

#example { background: #fff url(image.gif) no-repeat; }

所以，如果您的汽車圖像被白色背景顏色覆蓋，不僅可以用於原始圖像分辨率，還可以用於較大的圖像，因爲白色將覆蓋瀏覽器窗口。

如果您有更具體的需求，請發表評論。

來源

2012-02-14 14:46:54

你應該嘗試以下，以使圖像全屏：

html { 
    background: url(images/bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
}

有關詳情，看看here。

來源

2012-02-14 14:28:21

我很樂意使用CSS3，因爲這會讓我的工作更輕鬆哈哈。但我需要使用當前的標準。 – Dandy 2012-02-14 14:31:57

-1

如果您不能使用CSS3 - 更改下面的代碼

#bg IMG { 的位置是：絕對的;
top：-50％;
left：0;
right：0;
bottom：0;
margin：0 auto;
最小寬度：50％;
最小高度：50％;
}

來源

2012-02-14 14:55:54

在Firefox中的全屏幕背景圖像

回答

相關問題