Div on Image tag?

HTML & CSS
1

ImageShack® - Online Photo and Video Hosting

How can I make
a image above the image frame
but under the medal… ?

And since the middle picture will always change I need to use
Img tag:
<img src=“Winner.jpg” />

so how can I do that?

2

Just give the image a border (with padding, then put the medal under it and move it up with negative margins.

3

Right on!

4

sounds complicated if you can’t use background images.

So here’s an idea: have the img tag in a div and also in that same div an absolutely-positioned element holding the medal/frame image.

Something like
<div class=“winner”>
<img src=“newwinner.jpg” width=“50” height=“50” alt=“current winner is X”>
<span></span>
</div>

.winner {
position: relative; <–reference for the medal element
width: 50px;
padding: width-of-frame-px;
}
.winner img {
vertical-align: bottom; <–remove any descender space
}

.winner span {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(themedalframe.png) 0 0 no-repeat;
}

something like that. Though while using inline styles is not condoned, I have seen people use it because the server has access to it:

<div class=“winner” style=“background: url(enteredbyserver.jpg) width-of-frame-px width-of-frame-px no-repeat;”>
<img src=“medalframe.png” …>
</div>