CSS - Overlaying one image on top of another

Question

Hey folks!

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

You can't use relative positioning where? On the gravatar image?

I have to wonder why you have your overlay div outside the container of the image itself. At the very least they should be siblings. Make a container that only holds the image and the overlay, then make the overlay positioned absolute at 0,0 to be on top of the image.

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

Answer 2

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;}