title: Image tag with background image has a border
body: <p>I have an HTML button that shows an icon on top of some text:</p>
  
  <pre><code>&lt;button class="btn btn-link center"&gt;
  
      &lt;img class="connect"&gt;
      &lt;br/&gt;
      CONNECT
  
  &lt;/button&gt;
  </code></pre>
  
  <p>My image states are defined in CSS: </p>
  
  <pre><code>.connect{
      background-image:url('../images/connect_rest.png');
      background-repeat:no-repeat;
      width:60px;
      height:60px;
  } 
  
  .connect:hover{
      background-image:url('../images/connect_hover.png');
      background-repeat:no-repeat;
      width:60px;
      height:60px;
  }
  
  .connect:active{
      background-image:url('../images/connect_active.png');
      background-repeat:no-repeat;
      width:60px;
      height:60px;
  }
  </code></pre>
  
  <p>So, why is there a white border around my box? I get it, I know it's funky that I'm setting a background-image on an image element. But, I need this compatible with IE8 so I can't set the "content" property in CSS. </p>
  
  <p>Thanks for any helpful tips. </p>