writing text on an image

I want to write a discount amount which is coming from a Database onto an image. I have taken an image like:

<div style="height: 158px; width: 210px; float: left; position: relative;">
  <a id="aproduct" runat="server">
    <asp:image id="pimage" runat="server" width="210" height="158" border="0" />
  </a>
  <asp:Panel ID="Panel1" runat="server">
    <asp:image id="discountTag" style="position: absolute; top: 0; right: 0;"
               border="0" src="images/PriceTag.png" alt="" 
               height="35px" width="35px" />
  </asp:Panel>
</div>

I want to show discountTag image as background to <td> and show discount amount in a label.

I try for this, but when I do this the big image on which I am showi开发者_Python百科ng my discountTag label are not getting aligned properly. I want the o/p like Big image on which discountTag image on which discount amount. Can anybody do this?

You can have the big image as background of div element, then use absolute positioning to place the discount wherever you want. Sample code:

<div id="pnlBigImage" runat="server" style="position: relative; background-image: url(images/Penguins.jpg); width: 500px; height: 375px;">
    <span id="lbDiscount" runat="server" style="position: absolute; right: 25px; bottom: 25px; width: 100px; height: 25px; background-color: white;" />
</div>

And in the code behind:

lbDiscount.InnerHtml = "value from database here...";

The important part is to put the actual width and height of the big image as the width and height of the div element otherwise it will not be aligned properly indeed.