Full Screen Background Image in Firefox - html

Question

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>

Answer 1

You should try the following to make the image fullscreen:
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;
}
For details, have a look here.

Answer 2

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;}
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.
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: 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.

Answer 3

If you can't use CSS3 - change following code
#bg img {
position:absolute;
top:-50%;
left:0;
right:0;
bottom:0;
margin:0 auto;
min-width:50%;
min-height:50%;
}