Re: need a background trick

[simoncmason]

Hi Cybershot,

First off your div #right-background is an empty div you are using for presentational purposes only, this is bad practice and you don’t need to do this.

I think you’re going about it the wrong way.

Instead of trying to style each div create a background for the whole body.

Create a very wide background image say 2000px wide with the left half your brown texture and the right your white texture, it only needs to be a few pixels deep, just play with it until the repeating texture looks correct. (It needs to be this wide to fill the screen of all monitors).

Then apply this background to your body element and add the following css to body:

background-repeat:repeat-x;
background-position:center;

Since you are centering your background you can work out how many pixels you need to offset your image by to the left i.e. making the white section wider (when you are making it in photoshop / gimp or whatever) so it fits your columns.

Then you are centering your wrapper over the top of your background – set the background to transparent and everything will be lovely.

This should work as you are using a fixed width on your wrapper . If you were going with a fluid width and a percentage based wrapper I think we’d be looking at add one background to the html element and another to the body element and then giving the body a % margin to the left. Then you’d overlay this with a background on your wrapper. Bit more to it but is should work out with some tweaking.

Hope this gets you rolling.