Though it may seem a simple technique to give a website a background image and centering it to the page with background: url('image_url_here') no-repeat center top, it doesn't always work out the way you want it to.

Whilst working on a client's website which required a very wide centered background and the page container to be 1024px wide, I found that once you made the browser window smaller than 1024px wide, the container made the page scroll horizontally like it should, but the background image kept shifting, centering itself to the browser window and therefore not lining up properly with the content.

Strangely, this problem was occurring in every browser except Internet Explorer 6 and 7, and after many attempts with Javascript functions and CSS expressions, a simple solution we found was to add min-width to your html and body CSS. By doing this, once the browser window reaches smaller than 1024px, the page will scroll horizontally, the background image will stop shifting and still line up with the content.

An example of how your CSS should look like is this:

html {
    min-width: 1024px;
}

body {
    min-width: 1024px;
    background: #FFFFFF url('/media/images/background.jpg') no-repeat center top;
}