Tutorial :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


Solution:1

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>   


Solution:2

Use Css like Given Below:

<style type="text/css">    .lblposition {    position:absolute;    left:789px;    top:30px;       height: 21px;    width: 65px;  }  </style>  

Use this css in label like below:

<asp:Label ID ="lbl" runat="server" Text="Search" BackColor="Red" ForeColor="Blue"   CssClass ="lblposition"></asp:Label>  


Solution:3

<table>      <tr>          <td style="background-image:url("Images/image1.jpg"); height:20px; width:20px;">              <asp:label ID="Lbl1" runat="server" Text="" Fore-color="Red" />          </td>      </tr>   </table>  

Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Previous
Next Post »