全屏幕背景图像在Firefox [英] Full Screen Background Image in Firefox

问题描述

我有一个背景图片覆盖浏览器屏幕的整个宽度和高度。它工作在chrome和IE，但在Firefox中，图像被下推。任何想法发生了什么？

I have a background image covering the entire width and height of the browser screen. It works in chrome and IE but in Firefox the image is being pushed down. Any ideas what's happening?

/* 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>

推荐答案

Justin首先，是通过CSS设置，而不是内联的，因为你这样做。所以，第一个解决方案是相当简单：

Justin first of all, by definition a BACKGROUND image, is set via CSS and not inline as you do it. So, a first solution is rather simple:

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

它会把你的背景放在中心， #bg作为其余内容/标记的包装器。

It will put your background in the center, and there you go. the #bg acts as a wrapper for the rest of your content/markup.

现在如果你想让你的背景根据浏览器窗口自动调整大小，没有办法如果你不能使用CSS3做它。

Now if you want your background to automatically resize depending on the browser window, there is no way to do it if you can't use CSS3.

ps：请注意，您可以通过拍摄整个屏幕的背景来拍摄背景颜色很长的宽图像，并使用背景简写：

ps: note that you can fake a background taking the whole screen by photoshoping a very long and wide image that will repeat a background color, and by using the background shorthand like that:

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

因此，如果您的汽车图像被白色背景颜色覆盖，

So if your car image is covered by a white background color, it will be ok not only for the original image resolutions, but also for bigger ones as the white color will cover the browser window.

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

Please comment if you have more specific needs.

这篇关于全屏幕背景图像在Firefox的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！