<div style="position:relative;top:0;left:0"> <image src="one.jpg" style="position:absolute;top:0;left:0;width:120px;height:120px">
<image src="two.jpg" style="position:absolute;top:50px;left:50px;width:20px;height:20px"> </div> The enclosing <div> is important. It has positional info, so the coordinated in the enclosed <img>s are relative to that div. You do not have to specify the width and height of the images. I've just doing that to show the sizes. The second image will be displayed on top of the first: no z-index is given, so they are rendered in the order they occur. If you want, you could say <div style="position:relative;top:0;left:0"> <image src="one.jpg" style="position:absolute;top:0;left:0;width:120px;height:120px;z-index:1"> <image src="two.jpg" style="position:absolute;top:50px;left:50px;width:20px;height:20px;z-index:2 "> </div> From: Victor Subervi [mailto:victorsube...@gmail.com] Sent: June-21-10 10:09 AM To: Peter Coates Cc: Climis, Tim; CSS Discuss Subject: Re: [css-d] An Image On Top Of an Image On Mon, Jun 21, 2010 at 12:23 PM, Peter Coates <pcoa...@yukon1000.com> wrote: Wouldn't it be easier to construct the finished image you want, and define the active area for the "button" with a <map>? Yeah, well, could do; however, I reuse the button over different images. How do? Too complicated? V -----Original Message----- From: css-d-boun...@lists.css-discuss.org [mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Victor Subervi Sent: June-21-10 8:36 AM To: Climis, Tim Cc: CSS Discuss Subject: Re: [css-d] An Image On Top Of an Image On Mon, Jun 21, 2010 at 10:56 AM, Climis, Tim <tcli...@indiana.edu> wrote: > Umm. Can we have an example of what you want? There are many options > here, and depending on the effect you're looking for, some may or may not > work. kinda figured that... > For example: do you want the bottom image to be visible under the top image > (translucent)? yes > Are the images the same size or is one going to frame the other? not the same size. The bottom one has a "hole" in it for the button to fill. Imagine the logo for mailman (python mailing list). There is a "flag" part to the left with a "circle" on the right: http://www.mailmanlist.net/img/MailmanLogo75x199.jpg Imagine it with "flags" on either side. Hope that was better. TIA. V ______________________________________________________________________ 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-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/
