homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

Add images over another image.
Layer two small images over a bigger one

Msg#: 4330563 posted 2:59 pm on Jun 24, 2011 (gmt 0)

Well i wasnt sure if i should post this in the HTML Or the CSS Forum. but i think its more related to CSS..

So i have this links page, with 468x60 Banners. I Want to add two little icons (about 10x10) on the right bottom side of the banner, with links on them,to link to the page where my banner is located, and with the contact link, in case i want to re contact the person.

Im not Quite sure how to put a image over a other image, so could anyone please give me some example?

[edited by: alt131 at 11:54 pm (utc) on Jun 24, 2011]
[edit reason] Thread Tidy [/edit]



WebmasterWorld Senior Member leosghost us a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

Msg#: 4330563 posted 3:34 pm on Jun 24, 2011 (gmt 0)

look for "z index" and use "png transparency"


WebmasterWorld Senior Member rocknbil us a WebmasterWorld Top Contributor of All Time 10+ Year Member

Msg#: 4330563 posted 4:29 pm on Jun 24, 2011 (gmt 0)

There are quite a few ways to do this.

If the bottom image has no interactivity at all, simply make it a background image.

#my-box { display:block; width:27px; height: 27px; background: url(/images/my-bg.jpg) top left no-repeat; }
#my-box img { border: none; }

<p id="my-box"><img src="/images/my-icon.gif" alt="My icon"></p>

Note that both PNG and GIF support transparency. GIF still excels as far as reduced file size; it has a limited palette and if you can create, say, a 16 color image without serious degradation, it will be far smaller than a PNG. The down side is transparent edges don't render. Always try GIF first, then resort to PNG.

A second way, if both images need to be "free" is what Leosghost alludes to - create a relatively positioned container and position the items inside it using z-index.

#my-box,#img1,#img2,#img3 { display:block; width:27px; height: 27px; border:none; }
#my-box { position: relative; }
#img1 { z-index: 400; }
#img2 { z-index: 450; }
#img3 { z-index: 500; }

<p id="my=box">
<img src="/images/icon1.gif" id="img1" alt="Icon 1">
<img src="/images/icon2.gif" id="img2" alt="Icon 2">
<img src="/images/icon3.gif" id="img3" alt="Icon 3">

Note we don't have to spec top:0; left:0; as those are the defaults. This is useful if you want to create fade-in/fade-out slide shows using Jquery, combining animate() and fade/hide and resetting the z-index.

Another method is using sprites, but it's really just one image. The most simple example, let's change the img to an anchor and set mouseover states.

<p id="my-box"><a href="some-link">This text won't display</a></p>

#my-box,#my-box a { display:block; width:27px; height: 27px; border:none; outline:none; text-indent:-50000px; }
#my-box a { background: url(/images/facebook.gif) top left no-repeat; }
#my-box a { background-position: bottom left; }

The image is actually twice the object's height, so you'd have an image that is 27 px wide by 54 px tall with the "normal state" in the top half, mouseover state in the bottom half:

normal state
mouseover state

Note also it's the text-indent and outline properties that allow us to use an SE descriptive link text and still have it not show, just let the BG image show. Using this concept, you can have the single image position anywhere you want and have multiple images in it. Synonymous with the above,

/* x first, y second when using pixel values, always from upper left */
#my-box a { background: url(/images/facebook.gif) 0 0 no-repeat; }
#my-box a { background-position: 0 -27px; }

There are other ways to do it too, but these are the three I use almost daily.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved