Am 07.04.10 21:45, schrieb Conjurer:
[...] > 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. Not quite, but see below. > 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. > > Examole: http://tinyurl.com/yfl8nb8 [...] > 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? [...] Hi, (since this is my first post, I hope this is appropriate, otherwise let me know) here's one way: in your CSS (commented) replace: /* this targets an img element *within* an element with the ID #ring */ #rings img { /* this does *not* what you think it does */ /* it *would* send the image further 'away' from the viewer, */ /* probably behind the text */ z-index: -1; } with this: /* target an img element with the ID #rings */ img#rings { /* set the size *relative* to the width of the */ /* containing block - usually the viewport */ width: 50%; /* only use either 'height' or 'width' here, */ /* unless you want your guy to be 'slinky' */ /* move image 'closer' to the viewer */ z-index: 10; } in your HTML replace this: <img src="p7iq/img/Rings_png8.png" alt="Steel Rings Melt Right Through Each Other" name="rings" width="515" height="504" class="pos_fixed" id="rings" /> with this: <img src="p7iq/img/Rings_png8.png" alt="Steel Rings Melt Right Through Each Other" name="rings" class="pos_fixed" id="rings" /> Working example (using your code): http://www.joergen-lang.com/css-d/examples/img-resize/ (tested with Safari 4, FF 3.6, OS X 10.6.3) Note: I have deliberately omitted the 'height' and 'width' attributes from the HTML markup to make it easier for CSS to take over. [improvements, rants, etc. welcome] hope this helps, Joergen ______________________________________________________________________ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d 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/
