need a background trick

[cybershot]

I have been recoding a site that I have been working on and I have spent about 6 hours trying to figure out the background. I have it just the way I want it now but ran into a problem. I achieved this look by applying the dark background to the body tag, applying the white pattern to the content area and then used absolute positioning to apply the white background again to the top right corner of the page and I wanted it to extend all the way right which is does and all the way down which it does not. Take a look and you can see. Got any idea how I can fix this?
http://www.themebuddies.com/templates/sider-2.0

[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.

[simoncmason]

Well, without digging through your css some more, by setting the height to 100% you are setting it to the height of the viewport, so when you scroll down this element retains its height – i.e. the height of the viewport. Since you have positioned it absolutely it moves up with the page – it is stuck to the top of the page.

That’s why it is happening, you’re better off finding a way to get the styling right without presentational only divs or other elements.

[Author]

Posts