title: Horizontal site using Flex Box & divs w/ background-image
body: <p>I'm trying to create a demo for a horizontal site using Flex Box made up of images as placeholders. I'm trying to use div with background images. I'd like the divs to autoscale vertically to the size of the window but fit to the width of the background image.</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html lang="en-US"&gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;CSS 3 horizontal site demo&lt;/title&gt;
    &lt;style type="text/css"&gt;
      .main {
        display: box;
        display: -moz-box;
        display: -webkit-box;
      }
      .panels {
        background-repeat:no-repeat;
        background-position:center top;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;    }
      #panel-1 {
        background-image: url(scen1.png);
      }
      #panel-2 {
        background-image: url(scene2.png);
      }
      #panel-3 {
        background-image: url(scene3.png);
      }
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="main"&gt;
  &lt;div id="panel-1" class="panels"&gt;&lt;h1&gt;First Panel&lt;/h1&gt;&lt;/div&gt;
  &lt;div id="panel-2" class="panels"&gt;&lt;h1&gt;Second Panel&lt;/h1&gt;&lt;/div&gt;
  &lt;div id="panel-3" class="panels"&gt;&lt;h1&gt;Third Panel&lt;/h1&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Instead, the images are filling to the size of the content. Any CSS3 gurus have the solution?</p>
  
  <p>Thanks!</p>