Sent by Joergen W. Lang on 8 April 2010 00:12
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 [EMAIL-REMOVED]]
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/
