title: Fit div size to background image
body: <p>I'm trying to set the size (both width and height) of a div to match it's background image size, but I can't get it working.
  The background image size has to be in percentages, because I'm dealing with a responsive website. On smaller screens, the background should be displayed completely (with less width, but still proportional), and the div who has the image should follow that size.</p>
  
  <p>I tried various values of the background-size, such as auto 100%, cover, contain, etc. but nothing did the trick.
  There's a similar question here about this: <a href="https://stackoverflow.com/questions/17279959/scale-div-to-background-image-size">scale div to background image size</a> but it didn't solve my problem either.</p>
  
  <p>I'd really appreciate if someone knows how to do it.</p>
  
  <p><strong>EDIT:</strong>
  I made a fiddle to show the behavior: <a href="http://jsfiddle.net/osv1v9re/5/" rel="nofollow noreferrer">http://jsfiddle.net/osv1v9re/5/</a>
  This line is what is making the background image so small:</p>
  
  <pre><code>background-size: auto 100%;
  </code></pre>
  
  <p>But if it is removed is removed, the background will fill the proper width, but not the height.</p>