title: css div id container fails to show background image for percent height and width
body: <p>Why does the CSS div id gamecontainer not show the background image if height and width are in percent? It works in pixels, but I want it to fill different screen sizes.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;style&gt;
  
  body{
      height:100%;
      width:100%;
  }
  
  #gamecontainer {
    width:100%;
    height:100%;
    background:url("http://www.w3schools.com/css/img_forest.jpg");
    border: 1px solid black;
  }
  
  .gamelayer {
      width:640px;
      height:480px;
      position:absolute;
      display:none;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="gamecontainer"&gt;
  &lt;canvas id="gamecanvas" width="100%" height="100%" class="gamelayer"&gt;           
  &lt;/canvas&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt; 
  </code></pre>