title: Why doesn't the background image show up without specific width and height?
body: <p>Here's an example code</p>
  
  <p>I've been wondering why the <code>background-image</code> doesn't show up unless I specific the image's width and height in pixels. I tried to specific only the width in percentage but it didn't work. The <strong><a href="http://www.w3schools.com/css/css_background.asp" rel="noreferrer">w3cschools.com</a></strong> was able to show the background image without specifying the width and height, but it works only in body background. Any explanation or solution workaround?</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="pic"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.pic {
    background: url("http://i.imgur.com/HIt6f8r.png") no-repeat;
    display: block;
    position: relative;
    width: 244px;
    height: 230px;
    background-size: contain;
  }
  </code></pre>