title: Div Background Image Z-Index Issue
body: <p>I am trying to get the background image of my content to appear behind the header and footer. Currently, the top of the content's background is sticking out onto the header, and you can see that the bottom has slightly covered the footer (notice the slight change of the footer's border colour). I have tried setting applying <code>z-index:-100;</code> to content which worked but also makes the text unselectable. I then tried applying <code>z-index:1;</code> to content, but that did not make the content appear under the header/footer.</p>
  
  <p><a href="http://www.sfu.ca/~jca41/stuph/la3/template.html" rel="noreferrer">link to website</a></p>
  
  <p><img src="https://i.stack.imgur.com/S89Fr.jpg" alt="enter image description here"></p>
  
  <pre><code>//html
  &lt;div id="wrapper"&gt;
      &lt;header&gt;
          &lt;div id="logo"&gt;&lt;/div&gt;
          &lt;nav&gt;
              &lt;ul&gt;
                  &lt;li id="aboutNav"&gt;&lt;a href="template.html"&gt;home&lt;/a&gt;&lt;/li&gt;
                  &lt;li id="menuNav"&gt;&lt;a href=""&gt;menu&lt;/a&gt;&lt;/li&gt;
                  &lt;li id="specialsNav"&gt;&lt;a href=""&gt;specials&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/nav&gt;  
      &lt;/header&gt;
      &lt;div id="content"&gt;
          content &lt;br&gt; goes &lt;br&gt; here &lt;br&gt;
          &lt;a href="http://www.google.ca" target="_blank"&gt;google&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;footer&gt;
      &lt;div id="thumbsDesc"&gt;&lt;/div&gt;
      &lt;div id="thumbs"&gt;&lt;/div&gt;
  &lt;/footer&gt;
  
  
  
  //css
  header {
      width: 100%;
      height: 100px;
      background: url(../img/top.png) repeat-x;
      z-index: 110;
  }
  
  #wrapper #content {
      color: #FFFFFF;
      background: url(../img/body.png) repeat-y;
      width: 524px;
      padding: 25px 30px 25px 30px;
      position: absolute;
      bottom: 100px;
      top: 90px;
      margin: 0 0 0 150px;
      z-index: 1;
  }
  
  footer {
      margin: -107px 0 0 0;
      width: 100%;
      height: 107px;
      background: url(../img/bottom.png) repeat-x;
      z-index: 100;
  }
  </code></pre>