How do i implement this?

HTML & CSS
1

Hi guys,

wondering if anyone has a solution for this

i have a drop shadow box on a long gradient

click here to see image

this is the main bg to a website, so it has to stretch to fit content

i have the blue gradient on a body tag repeating horizontally on the website

for the white bg i am tryign to use somethign like this

#mainbg_head {
	background: url(images/main_head.jpg) no-repeat;
	width: 980px;
	height: 745px;
}

#mainbg_middle {
	background: url(images/main_mid.png) repeat-y;
}

#mainbg_foot {
	background:url(images/main_foot.png) no-repeat;
}

how do i implement this properly :S because i will need the content to start at the head of the image and then the middlepart to come in and stretch after the head image?

i am trying to avoid having to use one large image, so is there another way?

2

Do it as three separate divs.

The #mainbg_head div will be an empty div and only need to be about 10 px high and just holds the top shadow and top 2 corners.

Next follows the content element which will repeat both side borders down the y-axis and will be a fluid height to accommodate the content (don’t set a height on this element - or just set a min-height if you want an initial height) .

Then just add a footer at the bottom to finish off the effect just like I mentioned for the top part.

That’s the easiest way to do it although you could also nest the three divs if you don’t like empty divs but it makes it a little trickier.

You’ll have to use transparent images for the shadows so make another set of non transparent images for IE6 rather than use all the png filters and fixes for ie6.

3

but the drop shadow is over a gradient so the head image needs to be really long its 700px in height because until it fades into the white.
I cant leave this all empty :eek:

4

No, the dropshadow can be a 5px high slice just repeated down the y-axis of the container. As long as you make the edges of the slice transparent it can sit on top of the gradient with no problem.

You could do it with one very large image but that assumes the page will never grow more than the image and it also complicates the html.

5

Ok - here’s a quick example I knocked up using three divs as I mentioned above.

http://www.pmob.co.uk/temp/mari.htm

For IE6 I just changed to non transparent images but you could use one of the pngfix routines instead if you wanted.

6

thanks very much :D:D:D