How to put a label over an image

Question

I was trying to look out for a possible solution and am yet to find one. Could you help me out how to add a text over an image. Below is my code and I want lblWelcome and lblUsername to come over the image.

    <img alt="Logo" src="../Resources/Images/Header.gif" style="height: 70px; width: 1000px;"/>

     <asp:Label ID="lblWelcome" runat="server" Text="Welcome " CssClass="HeaderMenuText"></asp:Label>

     <asp:Label ID="lblUsername" runat="server" CssClass="HeaderMenuText" Text=""></asp:Label>  

Would be glad if someone can help me with this.

TIA, Su

Answer 1

Basically you're trying to overlay html elements on top of each other.

http://www.websiteoptimization.com/speed/tweak/overlay/

Look at the above url for examples

Answer 2

Another way can be by setting your image as the background image of an element and have your text as the child element e.g.

<div style="background-image: url(../Resources/Images/Header.gif);height:70px;width:1000px;" >     
     <asp:Label ID="lblWelcome" runat="server" Text="Welcome " CssClass="HeaderMenuText"></asp:Label>

     <asp:Label ID="lblUsername" runat="server" CssClass="HeaderMenuText" Text=""></asp:Label>
    </div>