title: Hide <img src> and display background image on top not working
body: <p>I have a problem hiding the <code>&lt;img src="/"&gt;</code> and overlay the background image on a media 480px version. </p>
  
  <p>I tried to use the code based on <a href="https://stackoverflow.com/questions/28710659/css-background-image-on-top-of-img">CSS background image on top of &lt;img&gt;</a> and it doesn't work for me.</p>
  
  <p><a href="http://jsfiddle.net/magnix2k/hjv74tdw/105/" rel="nofollow noreferrer">JDFIDDLE</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="j_img-overlay"&gt;
      &lt;img src="https://image.flaticon.com/teams/slug/freepik.jpg"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.j_img-overlay {
     width: 100px;
     height: 100px;
  }
  
  .j_img-overlay img {
     background-size: auto;
     background: url(http://icons.iconarchive.com/icons/graphicloads/100-flat/256/home-icon.png) no-repeat;
     position: relative;
     box-sizing: border-box;
     width: 100px;
     max-width: 100px;
     z-index: 100;
     }
  </code></pre>