Splitting a background for wider screens

[AshKendall]

Hi all,

Now I’m sure I’m just drawing a blank and missing something obvious because it’s so late, but I’m wondering if anyone could shed any light on the best way to do the following:

In coding the following design – http://relevantdevelopment.co.uk/dev/diamonds/ – I’m struggling to think of a way to ‘split’ the background image. Basically, the site will 960px wide and centered in the browser – the background to the left of the site, as shown in that image, will be in the dark grey/black, and anything to the right will be white and have the subtle gradient at the top.

I’ve considered a few ideas – using the html and body elements – but I’m not convinced I’ve found a good way of doing it.

Any suggestions are appreciated!

[ChrisRadford]

Hey, a few suggestions:

1) Join the images in the middle and centre (guessing your UK if it’s late?) the image.

Code:

background: url(image/path/here.png) center top;

2) Create a div with the following styles:

Code:

{
width: 50%;
height: 100%;
margin-left: 50%;
background: your-second-background image for the right-hand side.

}

and set the other image to be the background of the body. If you also set the two images to be "left top’ on the body and "right top" on the div, they’ll always join in the middle.

You’ll also need some other code to set z-index etc… as well.

Hope that helps,

Chris

[Author]

Posts