Please someone help me

In IE its fine but in Firefox my background image will not be at the bottom of the page for some reason. If you have to scroll down at all, you see whitespace outside of the container div, not the bottom of the background image. It will basically put the bottom of the image at the initial bottom of the window instead of wherever the bottom is once you have scrolled down all the way.

Code: Select all

html, body {
 height:100%;
}
body {
 background: url(Images/citybackground.jpg) bottom;
 background-repeat: no-repeat;
 text-align:center;
 margin:auto;
 min-height:100%;
 font-family:arial;
 font-weight:bold;
}
#container {
 width:750px;
 margin: auto;
}

and my main content columns are 600px in height so it makes it so you have to scroll down