Not sure if this is even doable with CSS, but here goes...
I have a picture - head and torso, that I removed the background from,
added a shadow, and saved as a png with alpha transparency.
It is about 520 x 520 px. I set it to be fixed position at the bottom 0
and left 0 - and a z-index to place it in front of everything.
It looks great (to me) when I look at it on a screen with 1024x768
resolution screen it gives me just the effect I am after.
But if someone looks at it in a smaller window - say 800 x600 then the
image is too large and ends up blocking too much of the text behind it.
Basically what I am after is that whatever size the window is, I would
like to resize the image (without a lot of distortion) so that it was
roughly about one fourth of the usable view port.
Is there a way to resize the image using CSS that will work in most
current browsers. I am really not concerned about IE6 - mainly want to
address users of FF and IE7 and up. If CSS can't do this, is there
something else that would be worth investigating?
Thanks for any info you can provide or links you can point me to.
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/