title: Fallback image with CSS
body: <p>I have an <code>&lt;img&gt;</code> that shows a remote image.
  I want it to <strong>fallback to another local image, in the case where the remote one is not reachable</strong>.</p>
  
  <pre><code>&lt;img class="cc_image fallback" src="http://www.iconarchive.com/download/i82888/limav/flat-gradient-social/Creative-Commons.ico"&gt; 
  
  .cc_image {
      width: 256px;
      height: 256px;
  }
  
  .cc_image.fallback {
      /* this URL here is theoretically a local one (always reachable) */
      background-image: url('https://cdn2.iconfinder.com/data/icons/picons-basic-3/57/basic3-010_creative_commons-256.png');
  }
  </code></pre>
  
  <p>It works so that when the <em>src</em> image is not found then the background image will be shown.</p>
  
  <p>The drawbacks are:</p>
  
  <ul>
  <li>it will always load the background image (additional HTTP request)</li>
  <li>it shows a little <em>not-found-icon</em> (a question mark on Safari) at the place of te original image, that is displayed above the background-image (not a big issue, but I'd like to get rid of it)</li>
  </ul>
  
  <p>How could I solve these issues?
  Or: are there other technics to achieve the same result?</p>
  
  <p>I found <a href="https://stackoverflow.com/questions/980855/inputting-a-default-image-in-case-the-src-arribute-of-an-html-img-is-not-valid">this question</a> but the given solutions rely on Javascript or on <code>&lt;object&gt;</code> (that seems to not work on Chrome). I would like a pure CSS/HTML solution, without Javascript if possible.</p>
  
  <p>I know about the multiple <code>background-image</code> but am not sure whether it is a good option (browser support? and will it fallback with an unreachable image?).
  Or I was thinking about embedding a SVG image as <em>data-uri</em>.</p>
  
  <p>Suggestions for the most flexible (and compatible) method?</p>