title: How to make landing page 100% of viewport?
body: <p>I'm trying to make a landing page, and it needs to be 100% of viewport, <a href="http://celine-bonin.fr/" rel="nofollow">example</a> .
  As you can see, picture is 100% of width and height.</p>
  
  <p>I've succeed to make it 100% of width, but for height I haven't. Picture is bigger than my viewport.</p>
  
  <p>This is my css <a href="http://jsfiddle.net/LtMpw/3/" rel="nofollow">code</a> :</p>
  
  <pre><code>body {
      background-color: #e3e3e3;
  }
  
  #main_wrapper {
      width:100%;
      height: 100%;
      float:left;
      background-image: url("http://imgur.com/B2y6wuI");
       background-position: center top;
      background-size: 100% auto;
  }
  
  #wrapper {
      width:970px;
      height:1000px;
      margin:0 auto 0 auto;
  }
  
  #landing {
      width:100%;
      height:800px;
  
  }
  </code></pre>