title: Div css background-image not showing 100% height
body: <p>I don't know why this css is working when I use a backgroung-image on the body tag set to 100% height but it is not showing full height (only showing screen height) when I use it on a div</p>
  
  <p>Here is the code:</p>
  
  <pre><code>&lt;body&gt;
     &lt;div id="bg"&gt;
     &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>body{
  position:relative;
  padding: 0;
  overflow-x: hidden;
  font-family: "Titillium Web";
  color:#fff;
  width: 100%;
  }
  
  #bg{
  height:100%;
  background-color: #030000;
  background-image: url(img/bg.jpg);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% auto;
  }
  </code></pre>
  
  <p>I don't want to use background-size:cover please</p>