title: How to make 3 divs with scaleable fullsize background images
body: <p>I want to make a single page site, so that you have to scroll down to view the content. I have 3 different content divs. Each div should have a different background image wich should scale according to the size of the browser while maintaining the aspect ratio of the image.
  hope its a bit clear what im trying to do?</p>
  
  <p>This is the css i currently have :</p>
  
  <pre><code>.div1 {
  height: 927px;
  width: 100%;
  background-image: url(bg3.jpg);
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  }
  .div2 {
  height: 927px;
  width: 100%;
  background-image: url(bg1.jpg);
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  }
  .div3 {
  height: 927px;
  width: 100%;
  background-image: url(bg2.jpg);
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  }
  body {
      margin-left: 0px;
      margin-top: 0px;
      margin-right: 0px;
      margin-bottom: 0px;
  }
  </code></pre>
  
  <p>And this is the html :</p>
  
  <pre><code>&lt;body&gt;
  &lt;div class="div1"&gt;&lt;/div&gt;
  &lt;div class="div2"&gt;&lt;/div&gt;
  &lt;div class="div3"&gt;&lt;/div&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p>As you can see it will not scale each div background image to the correct size of the browser. Anyone got a good solution to do this?</p>