Re: [css-d] PNG Image Position/ Size question - CSS
Am 08.04.10 02:26, schrieb David Laakso:
[...]
Joergen, in your example try (assuming we all share a sense of humor)?
img#rings {
/*delete width: 50%;*/
max-width: 50%; /*add*/
height: auto; /*add*/
z-index: 10;
}
I guess, in the end it depends on what the OP *really* wants.
Alternatively, he (?) *could* have read:
http://css-discuss.incutio.com/wiki/Using_Percent
J.
__
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/
Re: [css-d] PNG Image Position/ Size question - CSS
Oh you guys are just too funny! O:-) Yep, I just used a template to start this - but their stuff is so Abracadabra, Presto Chango! And I love that! I apologize, I really have gotten a little rusty at this and I mainly wanted to get pointed in the right direction. I didn't even know about the Wiki :-[ Thank you for that link. I am sure that is going to be very helpful And thank you all for your suggestions and help. __ 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/
[css-d] PNG Image Position/ Size question - CSS
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. Examole: http://tinyurl.com/yfl8nb8 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. __ 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/
Re: [css-d] PNG Image Position/ Size question - CSS
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/
Re: [css-d] PNG Image Position/ Size question - CSS
Joergen W. Lang wrote:
Examole: http://tinyurl.com/yfl8nb8
here's one way:
Working example (using your code):
http://www.joergen-lang.com/css-d/examples/img-resize/
Joergen
Joergen, in your example try (assuming we all share a sense of humor)?
img#rings {
/*delete width: 50%;*/
max-width: 50%; /*add*/
height: auto; /*add*/
z-index: 10;
}
--
desktop
http://chelseacreekstudio.com/
mobile
http://chelseacreekstudio.mobi/
__
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/
Re: [css-d] PNG Image Position/ Size question - CSS
*** REPLY SEPARATOR ***
On 7/04/2010 at 8:26 p.m. David Laakso wrote:
Joergen, in your example try (assuming we all share a sense of humor)?
img#rings {
/*delete width: 50%;*/
max-width: 50%; /*add*/
height: auto; /*add*/
z-index: 10;
}
If I may be so bold as to suggest:
max-height: 65%; (+/-)
width: auto;
On smaller sizes, such as 800x600, the image overlaps the
heavily-compressed navigation menu... (Gotta love Project-7's stuff eh!)
Just a thought...
Cheers...
---
Karl
__
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/
