title: Responsive background with maintained aspect ratio
body: <p>I'm using Malsup's Cycle 2 to create a background slideshow with corresponding sliding text in a separate div. I've got some simple markup here, but can't seem to get the image to crop so that it will always be 100% of the browser height (if you make a thin window you will see the red on the bottom).</p>
  
  <p>Maybe the solution is jQuery or CSS — everything I see suggests using <code>height:auto</code> on the image and the parent div, to no avail.</p>
  
  <p><a href="http://jsfiddle.net/QkkX3/2/" rel="nofollow">jsfiddle</a></p>
  
  <pre><code>&lt;div id="background" class="cycle-slideshow" 
                       data-cycle-fx="scrollHorz" 
                       data-cycle-timeout="2000"
                       data-cycle-slides="&gt; div"
  &gt;
      &lt;div style="background:#fcc"&gt;
          &lt;img src="http://stoptraining.me/staged/IMG_1402.jpg"&gt;
      &lt;/div&gt;
      &lt;div style="background:#cfc"&gt;
          &lt;img src="http://stoptraining.me/staged/IMG_1403.jpg"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="center"&gt;
      &lt;div id="text" class="cycle-slideshow" 
                     data-cycle-fx="fade" 
                     data-cycle-timeout="2000"
                     data-cycle-slides="&gt; div"
      &gt;
          &lt;div&gt;
              &lt;h2&gt;Title&lt;/h2&gt;
              &lt;p&gt;Lorem ipsum dolor ...&lt;/p&gt;
          &lt;/div&gt;
          &lt;div&gt;
              &lt;p&gt;Mel eu pertinax ...
          &lt;/div&gt;
          &lt;div&gt;
              &lt;p&gt;Utinam electram pertinacia ...
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>body, html {
      background: red;
      padding: 0;
      margin: 0;
      height: auto;
      width: 100%;
  }
  #background {
      position: fixed;
      width: 100%;
      height: auto;
      z-index: 99;
      overflow: hidden;
  }
  #background div {
      width: 100%;
      height: auto;
      background-size: cover;
      overflow: hidden;
  }
  #background div img {
  }
  img {
      width: 100%;
      height: auto;
  }
  #text {
      position: relative;
      text-align: center;
      z-index: 99;
  }
  .center {
      background: white;
      padding: 200px 0 0 0;
      width: 400px;
      overflow: auto;
      min-height: 1000px;
      margin: auto;
      z-index: 9999;
      position: relative;
      text-align: center;
  }
  </code></pre>