title: Bootstrap 3 and Responsive Background Images?
body: <p>I'm trying to create a responsive site using Bootstrap that has multiple full-width background images.</p>
  
  <p>Here's a mockup of how it should look:</p>
  
  <p><img src="https://i.stack.imgur.com/Tltkd.png" alt="enter image description here"></p>
  
  <p>The idea is for each image to stretch to the width of the browser window, and then the height to be scaled accordingly to preserve the aspect ratio.</p>
  
  <p>I've put up a JSFiddle of what I've got right now:</p>
  
  <p><a href="http://jsfiddle.net/SeFVV/" rel="noreferrer">http://jsfiddle.net/SeFVV/</a></p>
  
  <p>Currently, I've got multiple <code>&lt;section&gt;</code> tag, and I'm setting a background image with <code>background-size: cover</code> on each:</p>
  
  <pre><code>    #first {
          background: url(http://placehold.it/1350x890/37FDFC/&amp;text=photo1) no-repeat center center fixed;
          -webkit-background-size: cover;
          -moz-background-size: cover;
          -o-background-size: cover;
          background-size: cover;
          min-height: 800px;
          /*height: 800px;*/
          /*padding-bottom: 200px;*/
      }
  </code></pre>
  
  <p>As a hack, I'm setting min-width for each  so it's not really responsive.</p>
  
  <p>If I don't set min-height, then each  simply shrinks to fit the elements inside, which is not what I want.</p>
  
  <p>In a previous question, the answer suggested using multiple Bootstrap containers - are you meant to have multiple container divs normally? Also, that answer didn't really cover how to make it responsive, so that the width would fit, and the heigh would scale to preserve aspect ratio.</p>