HTML+CSS: How to add shadow (as image) to image?

Question

I ama trying to add to each image from my gallery a shadow. I know I can add the CSS shadow to each element, but the shadow that I am trying to add under my photos is taken from PSD layout and has a different shape than the CSS shadow.

Here's the sample, what I am trying to achieve:

And what I did until now:

      <div style="padding-left: 15px; position:absolute;">
        <img src="avatar.png" alt="" />
        <img src="shadow.png" alt="" style="margin: 190px 0 0 -191px; width: 187px;" />
      </div>

It's a terrible solution and even more, it's working for me only in Chrome. Could you guys help me please, how to do it more efficiently and workable in all browsers?

Answer 1

You may create a transparent PNG for the shadow effect, then put it as background-image in a div. Then, you could add your image into that div, positionning with css.

This solution would work with every browsers, even with IE6 if you get it to work with transparent pngs.

Hope this helps.