problem in displaying smaller image on larger image
<p>i want to give smaller image on top right corner of larger image which are generated dynamically.</p>

<p>I try staticcally by giving largerimage as background image to td like</p>

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

<p>but in my code the larger image is displayed in div like</p>

<pre><code>&lt;div style="height: 158px; width: 210px" onload="fun();"&gt;
    &lt;a id="aproduct" runat="server"&gt;
    &lt;image tag id="pimage" runat="server" width="210" height="158" border="0" /&gt;                                    
&lt;/div&gt;
</code></pre>

<p>how to display on this the smaller image</p>
