Background image/colour problem

[ChrisBolton]

Ok, so I consider myself to be pretty good when it comes to CSS but I'm pulling my hair out with this one.

I have a 2 column layout, the left column 600px and the right column 300px. The main wrapper is centered. I want the background colour split so that the left column and the spare space to the left is white, and the right column and the spare space to the right to be a dark colour, for the full height of the browser window. Using a centrally aligned background image works pretty well until the browser window is smaller than 900px, at which point darker half of the background image moves under the left column.

Is there any way I can keep the background image where it is supposed to be once the browser window width is less than the width of the centered wrapper?

Below are the basics:

<div id="wrapper">
<div id="content"></div>
<div id="secondary"></div>
</div>

body {
position: relative;
text-align: center;
background: url(../images/centered-background-image.gif) repeat-y top center;
}

#wrapper {
margin: 0 auto;
width: 920px;
text-align: left;
}

#content {
float: left;
display: inline;
width: 600px;
}

#secondary {
float: right;
display: inline;
width: 300px;
}

Any help that points me in the right direction will be greatly appreciated.

Kindest regards.
Chris.

[SuzyUK]

put the background image on your wrapper, and make sure it (the wrapper) has got CSS to enable to clear/contain both columns

you can position your background image by pixels, rather than centering if your image is not quite perfect in size and then it should resize with the container/wrapper just fine

[ChrisBolton]

I need the background image to fill outside of the wrapper though, the full width of the browser window. White to the far left of the browser window and dark to the far right.

[ChrisBolton]

Maybe I could put it in a div outside of the wrapper, and set the width to 100%, would that work? I'm going to try it now!

[ChrisBolton]

I think I have found a solution. I will use height 100% and set the background color of the left column to white. That should work.

[SuzyUK]

re: #:3991901

well in that case you need to put the background on the body/html element and then position the background so that the "split" that's the column difference always appears in the place you always want your columns to split no matter the resize

Now I know that sounds a bit weird ;) but if you've got two columns 600px & 300px the split between them both is always going to appear in the same place, you move/resize the window then the split moves, but in proportion to the wndow itself.. so you position your image to the exact (give or take a px) pixel and it should move, your biggest problem then becomes how much of a min width do you need to keep the rest of the depth going

[SuzyUK]

will use height 100% and set the background color of the left column to white. That should work.

That will only work as long as neither of your columns exceed 100% height, and that is the same is saying how long is a piece of string, how do you know how tall my browser is?.. how many windows do I have open, what is my viewing preference?.. not meaning to be difficult , but you can only use your CSS to to suggest your preference, there is no way to guarantee it

and actually what you're asking, is "fixed height" columns in CSS which is a very old question, you're on the right track with an image :) get it to the work as best you can