title: HTML & CSS: #wrapper background-image does not appear
body: <p>so I did searches on here beforehand, trying to find an answer to my question, but all the solutions I found gave me no results. Basically, I have an image in my div#wrapper that I'd like to display, but it won't unless I fill the area -after- the respective div with text.</p>
  
  <p>I have overflow:auto; in my #wrapper since I have floats in the succeeding divs.</p>
  
  <p>CSS file:</p>
  
  <pre><code>@media only screen and (min-width: 25em) {
     html {
     background: url(images/gridbg.jpg) repeat fixed center top;
     }
  }
  
  @media only screen and (max-width:25em) {
      html {
      background-color:#0c0c1f;
      }
  }
  
  img {
      border:0px;
  }
  
  textarea:focus, input:focus{
      outline: none;
  }
  
  #wrapper {
      margin:0 auto;
      width:60em;
      overflow:auto;
      background-image:url(images/cont-bg.png);
  }
  
  #content {
      text-align:justify;
      position:fixed;
      width:59em;
      height:100%;
      overflow:auto;
      padding-top: 0.4em;
      padding-bottom: 0.4em;
      padding-left: 0.4em;
      padding-right: 0.4em;
      outline:none;
      z-index:2;
      margin-top:12em;
  }
  
  #homeNav {
      position:fixed;
      float:left;
      margin-left:0.65em;
      margin-top:0.65em;
      z-index:3;
  }
  
  #primaryNav {
      z-index:2;
      float:right;
      margin-left:28em;
      margin-top:1em;
      position:fixed;
  }
  
  #navGFX {
      background-image:url(images/navGFX.png);
      background-repeat:no-repeat;
      width:60em;
      height:8em;
      float:left;
      position:fixed;
      z-index:1;
      margin-top:3em;
  }
  </code></pre>
  
  <p>HTML file:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;title&gt;Ag Design&lt;/title&gt;
  &lt;link href="main.css" rel="stylesheet" type="text/css"&gt;
  &lt;link rel="stylesheet" type="text/css" href="scrollstyles.css"/&gt;
  
  &lt;script type='text/javascript' src="js/flexcroll.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div id="wrapper"&gt;
  
  &lt;div id="navGFX"&gt;
  &lt;div id="homeNav"&gt;&lt;a href="index.html"&gt;&lt;img src="images/buttons/btn_logo.png"&gt;&lt;/a&gt;&lt;/div&gt;
  &lt;div id="primaryNav"&gt;
  &lt;a href="index.html"&gt;&lt;img src="images/buttons/btn_home.png"&gt;&lt;/a&gt;
  &lt;a href="index.html"&gt;&lt;img src="images/buttons/btn_link1.png"&gt;&lt;/a&gt;
  &lt;a href="index.html"&gt;&lt;img src="images/buttons/btn_link2.png"&gt;&lt;/a&gt;
  &lt;a href="index.html"&gt;&lt;img src="images/buttons/btn_link3.png"&gt;&lt;/a&gt;
  &lt;a href="index.html"&gt;&lt;img src="images/buttons/btn_link4.png"&gt;&lt;/a&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="content" class="flexcroll"&gt;
  This area is full of filler text
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I haven't the foggiest clue what I'm doing wrong. Anyone have any ideas? :/</p>