Keep A Bg Image Centered On Screen

I want to keep my bg image centered, no matter if the user's monitor is large enough to fit the whole thin开发者_运维百科g or too small to display it all at once. Similarly, it should remain centered horizontally when a user zooms in using ctrl+. The issue is best illustrated with images. Here is a zoomed out shot, which is the correct behavior:

Here is a zoomed in shot, which is not correct. The background shows the left margin, and is cut off 100% on the right side. It should get cut off equally from the left and right sides:

Finally here is the sample page, so you can play around with zooming in and out yourself:

http://pastehtml.com/view/b3qfjcghu.html

Thanks!

---

You seem to give the container the size of the image, so in fact it never is really 'centered' because it fits neatly at all times.

If you use this for #container:

width: 100%;

Then it will be using the full width of the screen, so that the background will be centered depending on the screen size.

http://jsfiddle.net/pimvdb/AxzdP/

---

Or, as Artfunkel suggested, you might want to just use the body element without any containers.

body {
    background: url(http://i.imgur.com/7JUFb.jpg) no-repeat;
    background-position: center 0%;
}

---

What you could also do is creating a separate container like this:

<div id="bgcontainer"></div>

with:

#bgcontainer {
    width: 100%;
    height: 1000px;
    background: url(http://i.imgur.com/7JUFb.jpg) no-repeat;
    background-position: center 0%;
    z-index: -999 /* keep on background so that other elements are above it */
}