How can I put a small image in the bottom left corner of a bigger image in CSS?

Question

I just finished my captcha script so it has the captcha image then next to it I have a link that is a small image that can be clicked to refresh the image to a new one.

I am wanting to make this small image be on top, on the bottom left corner of the large image, can someone help me with the CSS? Below is my complete code

<img src="captcha.php?sid=<?php echo md5(uniqid(time())); ?>" id="image" align="absmiddle" />
<a href="#" onclick="document.getElementById('image').src = 'captcha.php?sid=' + Math.random(); return false">
<img src="refresh.gif" alt="Reload a new image" border="0">
</a>

Answer 1

You'll want to use the CSS z-index property to set which image will display on top of the other: http://www.w3schools.com/Css/pr_pos_z-index.asp

You'll probably want to use relative or absolute positioning to position the small image: http://www.w3schools.com/Css/css_positioning.asp

Answer 2

HTML

<div id="images-container">
     <img src="image-big.png" alt="Big Image" id="big-image">
     <img src="image-small.png" alt="Small Image" id="small-image">
</div>

(if you are using XHTML, don't forget to change the end of the image tag to use /> instead of >

CSS

#images-container {
    position:relative;
}
#big-image {
    position:absolute; /* position:absolute aligns to the parent container
                          which in the HTML above is the <div> element */
    bottom:0;
    left:0;
    z-index:0;
}
#small-image {
    position:absolute;
    bottom:0;
    left:0;
    z-index:1;
}

The important thing for the z-index is that #small-image has a higher number than #big-image . If your repeating this effect, use classes instead of ids.

Answer 3

I think what you need to do is to set css property position: relative; to #images-container div, and leave the other css rules as they were. If you do that the images will be absolutely positioned but relative to their parent div instead of the body(whole screen).

Well.. good luck!

Answer 4

Z-index stuff can get sloppy in my experience. Why not just use an inline style to set your captcha as the background image of a div? Something like so:

<div id="image" style="background: url(captcha.php?sid=<?php echo md5(uniqid(time())); ?>) no-repeat; width: 100px; height: 100px;" id="image" align="absmiddle" >
<img src="refresh.gif" alt="Reload a new image" border="0" onclick="document.getElementById('image').style.backgroundImage = 'captcha.php?sid=' + Math.random(); return false">
</div>