CSS Background Image Being Pushed Left

Whenever, I resize the browser to a shorter width than the banner, it pushes the background image off to the left of the screen. I've experimented with a lot of different css positioning values, but I keep managing to screw it up more. Here's my default code that centers everything just how I want. Could I get help with finding css values that will prevent the background image from being pushed off the screen in my #banner div?

You can see an example of what I'm talking about here:

http://www.kinkyintentions.com

body {
text-align: center;
background-color: #b2b2b2;
}

#banner {
background-repeat: no-repeat;
background-image: url(images/bannerbg.jpg);
background-position: center center;
padding: 1em;
height: 225;
width: 940;
top: 30px;
}

Try for your #banner CSS:

#banner {
background-repeat: no-repeat;
background-image: url(images/bannerbg.jpg);
background-position: center center;
padding: 1em;
height: 225px;
width: 940px;
/* top: 30px; */
margin: 30px auto 0;
border:solid 1px red; /* for demo purposes only */
}


Unlike HTML, CSS requires units on all dimensions (except lengths of 0).

With invalid height and width they will probably default to 0 and 100% respectively, but different browsers may behave in different ways when confronted with invalid CSS.

Rather than top: 30px, you should probably use margin-top: 30px;

margin: 30px auto 0; is shorthand for:

margin-top: 30px;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;

Using margin-right: auto; and margin-left: auto; will centre your banner (except when your window is too narrow).

It is always a good idea to check your CSS with the W3C validator (link below).