title: Assign ASP.net Button image via css class
body: <p>I know i can use imagebutton for image buttons. But i want to use css sprites to decrease downloaded image count. So i want to assign normal buttons to image via css class. But it seems like not working.</p>
  
  <p>Here is the code and image i try</p>
  
  <p><img src="https://i.stack.imgur.com/mOH65.png" alt="enter image description here"></p>
  
  <p>the button codes</p>
  
  <pre><code>    &lt;asp:Button ID="btn1" CssClass="filter-tr" runat="server" /&gt;
  &lt;br /&gt;
  &lt;br /&gt;
  &lt;br /&gt;
  &lt;asp:Button ID="Button2" CssClass="filter-en" runat="server" /&gt;
  &lt;br /&gt;
  &lt;br /&gt;
  &lt;br /&gt;
  &lt;asp:Button ID="Button3" CssClass="flying" runat="server" /&gt;
  &lt;br /&gt;
  &lt;br /&gt;
  &lt;br /&gt;
  &lt;asp:Button ID="Button1" CssClass="fire" runat="server" /&gt;
  </code></pre>
  
  <p>here the css class code</p>
  
  <pre><code>    .filter-tr, .filter-en, .flying, .fire
  { display: block; background: url('images/image1.png') no-repeat; }
  
  filter-tr { background-position: -0px -0px; width: 60px; height: 25px; }
  filter-en { background-position: -0px -25px; width: 60px; height: 25px; }
  flying { background-position: -0px -50px; width: 44px; height: 16px; }
  fire { background-position: -0px -66px; width: 44px; height: 16px; }
  </code></pre>
  
  <p>but this way it works</p>
  
  <pre><code>.filter-tr {  display: block; background: url('images/image1.png') no-repeat;  background-position: -0px -0px; width: 60px; height: 25px; border-width:0px; }
  </code></pre>