title: Keeping background image at bottom
body: <p><br>
  I've been working with a solution for keeping images at the bottom page. The code I've currently got is:  </p>
  
  <pre><code>.footer {
      background-image: url('images/footer.png');
      background-repeat: repeat-x;
      position: absolute;
      height: 950px;
      width: 100%;
      z-index: -101;
      bottom: 0;
  }
  </code></pre>
  
  <p>However, this has issues. What I'm aiming for is a background that sticks to the bottom and is displayed behind everything else (Hence the low z-index). I've got the following code for the top part (There's a middle, that's just block colour, and just added to the body):  </p>
  
  <pre><code>.background {
      position: absolute;
      top: 0;
      width: 100%;
      height: 600px;
      background-image: url('images/sky.png');
      background-position: center;
      background-repeat: repeat-x;
      z-index: -100;
  }
  </code></pre>
  
  <p>Please note: The first part doesn't work (It's not at the bottom), but the second part does (It's at the top).<br>
  If you wish to visit the site, feel free to: www.duffydesigns.co.uk/brough (Please don't pass judgment, it's a work in progress, nothing is truly finished!).<br>
  Thanks for the help,<br>
  Joseph Duffy<br>
  Note: As I'm sure you can figure out, the top part is the sky, the bottom is grass and trees.</p>