Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

Add images over another image.

Layer two small images over a bigger one



2:59 pm on Jun 24, 2011 (gmt 0)

5+ Year Member

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]


3:34 pm on Jun 24, 2011 (gmt 0)

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

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


4:29 pm on Jun 24, 2011 (gmt 0)

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

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.

Featured Threads

Hot Threads This Week

Hot Threads This Month