How could I code this?

[MisturMan]

http://files.uploadffs.com/d/2/6aa72adc/example.jpg

The black part is one background, the orange is another and the red boxes can expand down. I tried coding this in many different ways however I also want the orange bit to expand - this means that when the two red boxes expand it pushes the orange background down leaving a gap? Is there any way I could do this using as little images as possible (black being one big image and the orange being a repeated image). Thanks for all advice and if you didn't get this then please tell me as I'll explain again - I'm tired and cannot think of what to type :)

Thanks,
Jason.

[HotelUser]

You could set the tables background to your main background, then put a DIV in the table with a non repeating vertical background, then just add the boxes as if it's one big table :P

[MisturMan]

I've tried something similar to that but it didn't work - since there has to be a margin at the top of my DIV, meaning there would be a big space where one background is showing where it shouldn't be. I'm going to get on the PC in a minute and show you guys another picture which may help.

[MisturMan]

I've just uploaded the picture.

http://files.uploadffs.com/d/0/0b6b0cdc/ggggg23232.png

[HotelUser]

I've just uploaded the picture.

http://files.uploadffs.com/d/0/0b6b0cdc/ggggg23232.png


Put a div around the entire thing with the background that's missing and then remove the background element from that bottom div/cell.

[MisturMan]

Yeah, that's what I done, however the top corners have rounded edges leaving there to be the background there which I do not want, there's also a margin at the top of the main container which makes the background go to the top - which looks awful.

Trust me - I've tried everything I know.

[adaym]

Use only 1 background image (that's all you can do anyway) and position the divs on top....

[MisturMan]

Have you not seen my problem? I've got overlapping divs and I basically need the bottom div to ignore it.

[MisturMan]

Despite trying various methods and 'hacks' - I decided to go for a different method which includes positioning - I've got a long night ahead of me getting this all right. :(

Thanks all.

[adaym]

From what I see there's a split background image because you're using two. You should only ever use one. Get that sorted out first then it'd be easy to tackle that.

[MisturMan]

Nah, it's fine now. I put a negative margin on the bottom div and made the top div z-index: 1; which made it able for me to do it :)