Hi Guys,
I have a user avatar on my website. Simple image tag:
<img src="foo.jpg" class="userphoto" width="48" height="48" alt="">
Now, i want to float an image (Facebook Icon - 10x10px) over this image on the top left corner of the image.
This is to signify that the user is authenticated to Facebook.
How can i do this? CSS styling on the image tag, or will i have to have a seperate div with absolute positioning?
Doesn't need to be transparent or anything, just needs to be positioned exactly in the top-left corner.
Of course i cant just physically modify the image, as i need to determine whether to overlay the image dynamically based on the Facebook status. But i was hoping to dynamically add a css class.
Any ideas?
ANSWER:
Got it working with a combination of both answers. Used a div instead of another image.
HTML:
<div class="foo">
<div class="fboverlay"></div>
<a>
<img src="foo.jpg" class="userphoto" width="48" height="48" alt="">
</a>
</div>
CSS:
.foo
{
position: absolute;
top: 0;
right: 0;
}
.fboverlay
{
background-image: url('/image/facebook/logo.gif');
position: absolute;
z-index: 1;
top: 10px;
left: 10px;
width: 10px;
height: 10px;
}
Thanks for the help.