title: Full screen background image with max-width
body: <p>I'm using the first technique described <a href="http://css-tricks.com/perfect-full-page-background-image/" rel="nofollow">here</a> to create a "full screen" background image that scales proportionally with the browser.</p>
  
  <p>My CSS for the image container is:</p>
  
  <pre><code>.fs-img {
      position: fixed;
      top: 4.5em;
      right: 0;
      bottom: 0;
      left: 0;
      background: url('image.jpg') no-repeat center center fixed; 
      background-size: cover;
  }
  </code></pre>
  
  <p>However I'd like to set a <code>max-width</code> on the my site of 1200px. Of course applying this to the body element has no impact on the image due to it being <code>position: fixed</code>.</p>
  
  <p>So is there an alternative way of having a full screen image with a maximum width while still maintaining fixed to the bottom?</p>
  
  <p>Here's the <a href="http://dl.dropboxusercontent.com/u/8063263/fullscreen/index.htm" rel="nofollow">demo</a> site I'm testing with.</p>