problem in displaying smaller image on larger image

i want to give smaller image on top right corner of larger image which are generated dynamically.

I try staticcally by giving largerimage as background image to td like

<table>
    <tr>
        <td width="220px" style="background-img: url(image url); background-repeat: no-repeat; height: 150px;" valign="top">
            <table width="100%">
                <tr style="height: 10%; width: 10%" valign="top">
                    <td width="50%">
                    </td>
                    <td width="20px" style="background-img: url(image url); background-repeat: no-repeat; height: 20px;">
                    </td>
                </tr>
                <tr style="height: 90%">
                    <td>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

but in my code the larger image is displayed in div like

<div style="height: 158px;开发者_C百科 width: 210px" onload="fun();">
    <a id="aproduct" runat="server">
    <image tag id="pimage" runat="server" width="210" height="158" border="0" />                                    
</div>

how to display on this the smaller image

You can position the smaller image absolutely over the larger image. First, you have to give your div a position: relative to fix a reference frame, then you can use position: absolute to position your smaller image. Example:

<div style="height: 158px; width: 210px; position: relative;" onload="fun();"> 
    <a id="aproduct" runat="server"> 
        <img id="pimage" runat="server" width="210" height="158" border="0" />
    </a>

    <!-- Here's the small image. Adjust top and left. -->
    <img style="position: absolute; top: 10px; left: 10px;" src="url/to/image.jpg" />
</div>