Bootstrap 3 and responsive background images?

Question

I am trying to create a responsive website using Bootstrap, which has several full-screen background images.

Here is a layout of how it should look:

The idea is that each image is stretched to the width of the browser window, and then the height is scaled accordingly to maintain aspect ratio.

I put JSFiddle from what I have right now:

http://jsfiddle.net/SeFVV/

I currently have several <section> tags and I am setting a background image with background-size: cover for 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 set min-width for each, so it is not very responsive.

If I don't set min-height, each one of them just shrinks to fit the elements inside, which I don't want.

In a previous question, the answer suggested using multiple Bootstrap containers - should you have multiple div containers? In addition, this answer was not really about making it responsive, so the width would fit and the height would scale to keep the aspect ratio.

Answer 1

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

Example:

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

Living example