Question

我有一个覆盖浏览器屏幕整个宽度和高度的背景图片。它适用于chrome和IE，但在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>

Answer 1

您应该尝试以下方法使图像全屏显示：

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。

Answer 2

Justin首先，根据定义，一个BACKGROUND图像，是通过CSS设置的，而不是像你那样内联。所以，第一个解决方案很简单：

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

它会将你的背景放在中心位置，然后就可以了。 #bg充当其余内容/标记的包装器。

现在，如果您希望自己的背景根据浏览器窗口自动调整大小，如果您不能使用CSS3，则无法执行此操作。

ps：请注意，您可以假设背景占据整个屏幕，通过照片显示一个非常长而宽的图像，重复背景颜色，并使用背景速记：

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

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

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

Answer 3

如果您无法使用CSS3 - 请更改以下代码

#bg img {     位置是：绝对;
    的顶部：-50％;
    左：0;
    右：0;
    底部：0;
    保证金：0自动;
    最小宽度：50％;
    最小高度：50％;
}

Firefox中的全屏背景图像

3 个答案: