2

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.

mskfisher
  • 3,291
  • 4
  • 35
  • 48
RPM1984
  • 72,246
  • 58
  • 225
  • 350

2 Answers2

5

I know I'm not using the exact dimensions you wanted, but here's a working example for you. (You would need the parent ".main_photo" div to be the dimensions of the main photo.)

.main_photo{
    position:relative;
    width:80px;
    height:80px
}
.inlay{
    position:absolute;
    top:5px;
    right:5px
}
<div class="main_photo">
    <img src="https://secure.gravatar.com/avatar/?s=200&d=mm&r=pg" />
    <img class="inlay" src="https://www.rit.edu/news/lib/views/public/images/dateline_images/facebook_icon.gif" />
</div>
Sos.
  • 914
  • 10
  • 14
cnanney
  • 2,101
  • 1
  • 13
  • 8
3

First you have to position it - either relative or absolute usually.

Secondly, you have to set a z-index if there are other positioned elements, though you may not necessarily need one.

Using top/left or bottom/right combinations layer the image over the other one.

This is advice without seeing any html/css. It will obviously differ depending on the situation.

#el-on-top { position:absolute; top:0; left:0; z-index:1; }

You may need to set position:relative so the AP'd element's top is relative to something, instead of say, the wrapper or the entire page.

meder omuraliev
  • 183,342
  • 71
  • 393
  • 434
  • thanks, i've showed you the HTML though. the CSS for 'usephoto' is very simple - vertical-align: middle and position: relative. any chance you can update your answer with some code? i was looking for advice as to whether i need a seperate div tag with the overlayed image, or can i do it all with some CSS directly applied to the img tag? – RPM1984 Aug 03 '10 at 01:44
  • 1
    That's a snippet of the HTML. Considering that's one line of HTML, it's hard to determine the structure, which is vital in regards to the stacking order and layering ( z-index ). Though in general, just AP the image and use top/left, should be good enough. It would help if you setup a jsfiddle. – meder omuraliev Aug 03 '10 at 01:46
  • The problem with these answers is that the style element, "position" is not supported by the following email clients: Outlook 2007/10/13 iPhone iOS 7/iPad (position: fixed; does not result in elements being positioned relative to the reading pane) Yahoo! Mail Google Gmail Source: https://www.campaignmonitor.com/css/ – user3758243 Jun 19 '14 at 22:09