CSS - Overlaying one image on top of another

Question

I can't best describe this in words, so I'll show you with pictures.

Here's how my designer intends the Gravatar images to look in the sidebar of our site:

Here's the overlay image I made (screenshotted from Photoshop):

Here's how it looks right now...

Not quite ideal, I think you'll agree. This is the CSS code I am using:

.gravatarsidebar {
    float:left; 
    padding:0px;
    width:70px;
}

.gravataroverlay {
 width:68px;
 height:68px;
 background-image: url('http://localhost:8888/images/gravataroverlay.png');
}

And here's the XHTML (and a sprinkle of PHP to fetch the Gravatar based on the user's email address, which is fetched from our database):

<div class="gravataroverlay"></div>

        <div class="gravatarsidebar">
            <?php $gravatar_link = 'http://www.gravatar.com/avatar/' . md5($email) . '?s=68';
            echo '<img src="' . $gravatar_link . '" alt="Gravatar" />'; ?>  
        </div>

So what can I do? I can't use relative positioning as it makes the word 'Search' in the div below stay moved to the right.

Thanks for your help!

Jack

Answer 1

Have you tried using z-index to force the two images to overlay? Maybe something like this? Here is a pseudo example.

<div class="gravatar-sidebar">
     <img class="overlay-image" src="images/gravataroverlay.png" />
     <?php $gravatar_link = 'http://www.gravatar.com/avatar/' . md5($email) . '?s=68';
     echo '<img src="' . $gravatar_link . '" alt="Gravatar" class="gravatar-image"/>'; ?>
</div>

/*CSS*/
.gravatar-sidebar {float:left;padding:0px;width:70px;position:relative;}
img.overlay-image{position:absolute;left:0px;top:0px;z-index:10;}
img.gravatar-image{position:absolute;left:0px;top:0px;z-index:1;}