Using CSS sprites for an input of type image

Question

I am creating a ImageButton that refers to a image, that contains several icons. I am trying to display the correct icon by positioning the background image, but that does not work. Here is how I create the ImageButton:

ImageButton closeButton = new ImageButton();
closeButton.CommandName = "CloseItem";
closeButton.ID = "BtnClose";
closeButton.Width = 16;
closeButton.Height = 16;
closeButton.ImageUrl = "/_layouts/15/1031/images/formatmap16x16.png?rev=23.gif";
closeButton.Style.Add(HtmlTextWriterStyle.Top, "-115");
closeButton.Style.Add(HtmlTextWriterStyle.Left, "-275");
closeButton.OnClientClick = btn.OnClientClick;
this.Controls.Add(closeButton);

Which results in the following HTML:

<input type="image" 
       name="ctl00$ctl40$g_8cd9fd5c_6191_46af_bf6a_ac27c5fb0e80$ctl00$toolBarTbl$RightRptControls$ctl02$BtnClose" 
       id="ctl00_ctl40_g_8cd9fd5c_6191_46af_bf6a_ac27c5fb0e80_ctl00_toolBarTbl_RightRptControls_ctl02_BtnClose" 
       src="/_layouts/15/1031/images/formatmap16x16.png?rev=23.gif" 
       onclick="STSNavigate('http:\u002f\u002fespseis13\u002fsharechange\u002fdefault.aspx');return false;WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$ctl40$g_8cd9fd5c_6191_46af_bf6a_ac27c5fb0e80$ctl00$toolBarTbl$RightRptControls$ctl02$BtnClose&quot;, &quot;&quot;, true, &quot;&quot;, &quot;&quot;, false, false))" 
       style="height:16px;width:16px;top: -115px;left: -275px">

The image I am displaying is this one:

I can't swith the input type that easily, As it needs the property CommandName = "CloseItem". Does anyone know, how I can move (and not scaling!) the image that is referenced by an input of type image?

Answer 1

Actually, it's possible to use a CSS sprite for an input of type of image; But as a background image.

You can assign a transparent image to src attribute and use background property to add/position a background image for the input element.

For instance:

<input type="image" src="path/to/transparent.png" alt="Cut" />

input[type="image"] {
  width: 24px;
  height: 26px;
  border: 1px solid gray;
  background: url(http://i.stack.imgur.com/byld6.png) -60px 0 no-repeat;
}

WORKING DEMO.