How to make landing page 100% of viewport? - html

Question

I'm trying to make a landing page, and it needs to be 100% of viewport, example .
As you can see, picture is 100% of width and height.
I've succeed to make it 100% of width, but for height I haven't. Picture is bigger than my viewport.
This is my css 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;
}

Answer 1

if you are working with html5/css3 you can use height:100vh (instead of %... vh = viewport height)... EDIT: depending on what browsers you want to support.. http://caniuse.com/viewport-units

Answer 2

with css3 you can
#main-wrapper{
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

Answer 3

Could you clarify what you are trying to do here? If you are trying to have a full size background image that scales to the width and height of your viewport, then a lot of your CSS is unnecessary. There is certainly more than one way to skin a cat but in this case CSS3 allows us to use
background-size: cover;
http://jsfiddle.net/LtMpw/6/