title: Background image not stretching fully
body: <p>I just launched a website the other day and thought it was free of weird CSS mistakes, but apparently it's not. What I am trying to do here is stretching an image to fit the page in height and width.</p>
  
  <p><strong>The problem:</strong>
  I have the following markup:</p>
  
  <pre><code>&lt;img src="images/night_sky7.jpg" class="stretch" /&gt;
  </code></pre>
  
  <p>and the following CSS applied to it:</p>
  
  <pre><code>img.stretch { 
  left: 0px;
  position: absolute;
  top: 0px;
  width: 100%;
  z-index: 0;
  }
  </code></pre>
  
  <p>This is working fine on my 17.1' laptop with 1440x900 resolution, but I noticed it doesn't work properly on other screen resolutions. What happens is that the background does not stretch to the bottom, but to just below the bottom or even to the middle of the page.</p>
  
  <p>Now, I've tried changing a lot of CSS, but I can't get it to fully stretch.</p>
  
  <p>Any help is appreciated.</p>
  
  <p>The url you could test on if you'd want is: <a href="http://bit.ly/eOEzXJ" rel="nofollow">http://bit.ly/eOEzXJ</a>.</p>
  
  <p><strong>If necessary, I can do any of these things:</strong></p>
  
  <ul>
  <li>Change image in Photoshop to any dimension</li>
  <li>Add any JS or CSS, but the height: 100%; solution does not work, at least, not as I can see</li>
  </ul>