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:

enter image description here

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?

I don't think you can use a sprite for input[type = image] can you? — Paulie_D
– Paulie_D, Commented Mar 5, 2014 at 15:53
Yeah: "A graphical submit button. You must use the src attribute to define the source of the image and the alt attribute to define alternative text. You can use the height and width attributes to define the size of the image in pixels." developer.mozilla.org/en-US/docs/Web/HTML/Element/Input — Paulie_D
– Paulie_D, Commented Mar 5, 2014 at 15:56

Hashem Qolami · Accepted Answer · 2014-03-05 17:02:17Z

5

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(https://i.sstatic.net/byld6.png) -60px 0 no-repeat;
}

WORKING DEMO.

answered Mar 5, 2014 at 17:02

Hashem Qolami

99.8k27 gold badges157 silver badges165 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Using CSS sprites for an input of type image

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related