title: Hide the src image in an <img> element, but show its background image
body: <p>I have an image element, to which I've added a different background image using CSS.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>img {
    background-image: url('http://i.stack.imgur.com/5eiS4.png') !important;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;img src="http://i.stack.imgur.com/smHPA.png" /&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I want to show the CSS-specified background image (<a href="http://i.stack.imgur.com/5eiS4.png">the Stack Exchange logo</a>) in the image element, instead of the image specified by the <code>src</code> attribute (<a href="http://i.stack.imgur.com/smHPA.png">the Stack Overflow logo</a>).</p>
  
  <p>Is this possible? I have a situation where I can't alter the HTML or use JavaScript, and am looking for alternatives.</p>