title: Background image full width, limited height
body: <p>I want to achieve a background-image effect, similar to on <a href="http://yipit.com/" rel="nofollow">http://yipit.com/</a>.</p>
  
  <p>Here is what I currently have:</p>
  
  <pre><code>&lt;div id="landing-header"&gt;
      &lt;img class="landing-background" src="{{ STATIC_URL }}images/new/landing-background.jpg"/&gt;
  &lt;/div&gt;
  
  #landing-header {
      height: 489px;
  }
  .landing-background {
      height: auto;
      min-width: 1460px;
      width: 100%;
      position: fixed;
      left: 0;
  }
  </code></pre>
  
  <p>What I want to accomplish is that the horizontal width is always as wide as the browser and the image scales accordingly. For example, if it is a <code>500x200</code> image and the browser is <code>1000px</code> wide, the image would scale to <code>1000x400</code>. This is working.</p>
  
  <p>However, I only want the container to be <code>400 px</code> high. In other words, I want to cut off the image at <code>400px</code>. For example, the image in a <code>2000px</code> browser width would be <code>2000x800</code>, but only the top <code>400px</code> would show. How would I accomplisht this?</p>
  
  <p>Note that I <strong>only</strong> want the image to resize when the width of the browser is larger than the width of the image, I don't want the image to resize every single time the browser is changed.</p>