Background Image problem with small browser windows

Hi everyone,
thanks in advance for any help you can give me.

I’m developing a splash page for [url]http://festivize.com/[/url]

I think it looks pretty good, however when the browser window gets smaller than 950px the background image begins to shift. This is fine, really. The problem is that when you horizontal scroll over to the right to read the text the background has now been cut off and looks terrible.

Is there a better method to get the desired layout than my current solution?

My relevant css is:

[CODE]
#background_img{
overflow: visible;
margin: auto;
background: url(“../images/splash1.jpg”) no-repeat top center;}
#container{
width: 950px;
margin: auto;
position: relative;}
#header{
width: 100%;
height: 140px;}
#content{
width: 730px;
margin-left: 220px;
color: #cccccc;}
[/CODE]

Thanks again for any help and hints!
Christopher Wright

Also in #CSS _↴