ASP.NET LinkButton background image with CSS

Here is the style:

.LinkButton
{
  background:url("imagePath/imageFile.gif") top left no-repeat;
  display:block;  /* Image will not show up without this line
  width:32px;  /* change to the actual image width */
  height: 32px;  /* change to the actual image height */
}

How to use it? Define the LinkButton as follows:

<asp:LinkButton ID="LinkButton1" runat="server CssClass="LinkButton"></asp:LinkButton>

To add a hover effect, for example, changing the background image when hovering the mouse over the LinkButton. Add this style in the CSS file:

.LinkButton:hover
{
  background:url("imagePath/mouseOverImageFile.gif") top left no-repeat;
  display:block;  /* Image will not show up without this line
  width:32px;  /* change to the actual image width */
  height: 32px;  /* change to the actual image height */
}

That’s it.

Happy programming!