Bootstrap 3 and Responsive Background Images?

Question

I'm trying to create a responsive site using Bootstrap that has multiple full-width background images.

Here's a mockup of how it should look:

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.

I've put up a JSFiddle of what I've got right now:

http://jsfiddle.net/SeFVV/

Currently, I've got multiple <section> tag, and I'm setting a background image with background-size: cover on each:

    #first {
        background: url(http://placehold.it/1350x890/37FDFC/&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;*/
    }

As a hack, I'm setting min-width for each so it's not really responsive.

If I don't set min-height, then each simply shrinks to fit the elements inside, which is not what I want.

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.

Answer 1

You can use dynamic height of window by adding to your html and body tag height of 100%, and the section tags of the page(where you want to streach the background images).

Example:

html,body,section{height:100%;}

Live Example