How would I do this?

[JD]

Hi

Suppose I have a gradient body background, dark blue at the top, light
blue at the bottom. The gradient is 600 px high. The body background is
set to the same colour as the last colour in the gradient, so it will
look fine on any res.

Now, suppose I have a center-alighed div for my content. The div will
have various heights, depending on the content. I want the div to have a
drop shadow that goes under the div at the bottom.

Pretty trivial if your background is a solid colour (I could create a
widthx1px background image and have it repeat-y down the div, and then
put another div underneath with the image to close the shadow) but how
is it done on a gradient background? I can't repeat a 1px shadow because
the colours won't be in keeping with most of the gradient. I could
impose a minimum height on the div to that of the gradient, and then
have a shadow image as high as the div, but how would I cater for pages
which exceeded this height, and needed shadows to continue past the end
of the gradient?

Is there an elegant solution?

 

[Dylan Parry]

Pondering the eternal question of "Hobnobs or Rich Tea?", JD finally
proclaimed:

Is there an elegant solution?

How about using a 24-bit PNG with alpha transparency for those browsers
that support it, with the appropriate filters in place for the one that
doesn't?

 

[Jonathan N. Little]

Pondering the eternal question of "Hobnobs or Rich Tea?", JD finally
proclaimed:


How about using a 24-bit PNG with alpha transparency for those browsers
that support it, with the appropriate filters in place for the one that
doesn't?

Or the above and a 'screened' GIF* for those that don't
*alternating black (or dark shadow color) and transparent pixel in a gid
that gives a crude transparent shadow...