Can I add an image to an ASP.NET button?

Question

I want to add an image, instead of the default button.

I already have a CSS class for the image, will this work?

<asp:Button ID="..." CssClass=""/>

I am trying it now, and the image is all scrunched up. Maybe it's a CSS issue?

Answer 1

Yes, you can do this, just be sure to set the width and height of the class in your CSS to prevent the scrunching

Answer 2

Why not use an ImageButton control?

Answer 3

Although you can "replace" a button with an image using the following CSS...

.className {
   background: url(http://sstatic.net/so/img/logo.png) no-repeat 0 0;
   border: 0;
   height: 61px;
   width: 250px
}

...the best thing to do here is use an ImageButton control because it will allow you to use alternate text (for accessibility).

Answer 4

Assuming a Css class of "image" :

input.image { 
  background: url(/i/bg.png) no-repeat top left; 
  width: /* img-width */; 
  height: /* img-height */ 
}

If you don't know what the image width and height are, you can set this dynamically with javascript.

Answer 5

I actually prefer to use the html button form element and make it runat=server. The button element can hold other elements inside it. You can even add formatting inside it with span's or strong's. Here is an example:

<button id="BtnSave" runat="server"><img src="Images/save.png" />Save</button>

Answer 6

Try this?

<asp:ImageButton src="image.gif" id="blah" runat="server" AlternateText="Button" />