PDA

View Full Version : Multiple backgrounds



oliver2601
04 Apr 2011, 02:27 PM
Ok, I need a little bit of help with this and would be grateful if somebody could assist.

I currently have a page which needs a large rounded box around it. I would like a rounded section at the top (15px margin) centred and a rounded section at the bottom (15px margin) I would also like the bottom to expand to the bottom of the web browser (Like on this site the footer is always at the bottom). I would also like a block of white inbetween the top and the bottom to make it look like a complete box.

I understand how I could do this with one image, but I'm wanting the bottom to be expandable.

The site isn't liquid, so that isn't a worry.

Many thanks,
Oliver

hlnd
04 Apr 2011, 03:54 PM
The way I do this is splitting the box into divs.
First div is static size and contains an image of the top ,with rounded corners.
Center div has static width and no size set, and background:repeat:repeat-y; property.
Bottom div is static as well.

Just think about what you want the site to "stretch" out when slicing up the image.
Did that make sense to you?