CSS - Overlaying one image on top of another
- by Jack W-H
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
