在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>

我宁愿使用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; }

所以，如果您的汽车图像被白色背景颜色覆盖，不仅可以用于原始图像分辨率，还可以用于较大的图像，因为白色将覆盖浏览器窗口。

如果您有更具体的需求，请发表评论。

答

你应该尝试以下，以使图像全屏：

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。

我很乐意使用CSS3，因为这会让我的工作更轻松哈哈。但我需要使用当前的标准。 – Dandy 2012-02-14 14:31:57

答

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

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

在Firefox中的全屏幕背景图像

相关推荐