The SitePoint Forums have moved.

You can now find them here.
This forum is now closed to new posts, but you can browse existing content.
You can find out more information about the move and how to open a new account (if necessary) here.
If you get stuck you can get support by emailing forums@sitepoint.com

If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

How to reproduce this image with css

I have a background with a drop shadow and as a static image it is fine but what I would like to do is break it into 3 parts, a top, middle and bottom.

Then using CSS I would like it to be able to put the top with no repeat, the bottom with repeat enough for any text, and then the bottom with no repeat. I cannot seem to get it to work and I am not sure if I have to put each one in its own div as a background-image or what.

Any help would be appreciated,

Dan

****I have the three images showing up in three separate divs and my margin and padding are set to 0px but there still exist about a 25px separation between each section.

If I put a 1px solid border around each div then everything comes together. I am lost right now.

This is just a rough example you can try. The #content div has height, but that's only so you can see the background. Add content to it and remove the height styling. The content padding prevents content from passing over the shadowed edges.

IE6 won't like these transparent pngs. If possible, reproduce the shadows without using transparent images, or us one of the png fixes for IE6.

CaryD, I am having that problem with IE not wanting to show the transparent portion correctly. I have tried one png fix but it does not seem to work well with the image reference coming from the stylesheet but works fine if the image is in the html with height and width set.

Now to sound foolish, I am not sure how to take my psd and make the shadow but not make it transparent and have it displayed without the image edge (the way it displays now). Any pointers?