title: background image stretch and crop
body: <p>So far I have managed to get the background image to stretch:</p>
  
  <p>XHTML:</p>
  
  <pre><code>&lt;div id="background"&gt;
      &lt;img src="images/background.jpg" alt="Background" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#background
  {
      width: 100%;
      height: auto;
      position: fixed;
      left: 0px;
      top: 0px;
  }
  
  #background img
  {
      width: 100%;
      height: 100%;
  }
  </code></pre>
  
  <p>This works well, except the image is being displayed from the top when the height of the image exceeds the window height. This means that the top of the image is always displayed but the bottom is cut off. I want to change this so that the image is always displayed from the centre (so that both the top and bottom of the image is cut off and the centre is of the image is displayed).</p>