Why does background-gradient not scale? - html

Question

My CSS gradient in the background does not scale, what can I do?
I plan to do a HTML layout in percentage, but the body gradient is too short.
example: http://jsfiddle.net/snGVt/
<div class="wrapper">
<div class="box round"><img src="http://goo.gl/wv4zi" /></div>
<div class="box round"><img src="http://goo.gl/wv4zi" /></div>
</div>
html{
height: 100%;
width:100%;
}
body {
width:100%;
background: #0e89b6; /* Old browsers */
background: -moz-linear-gradient(top, #0e89b6 0%, #00142c 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0e89b6), color-stop(100%,#00142c)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #0e89b6 0%,#00142c 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #0e89b6 0%,#00142c 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #0e89b6 0%,#00142c 100%); /* IE10+ */
background: linear-gradient(to bottom, #0e89b6 0%,#00142c 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0e89b6', endColorstr='#00142c',GradientType=0 ); /* IE6-9 */
}
.wrapper {
width: 60%;
margin-left: auto;
margin-right: auto;
}
.box{
width: 100%;
margin-top: 10px;
padding: 25px;
background-color: #fff;
}
.box > img{
width: 100%;
}

Answer 1

Try changing the html width and height styles to "min-height: 100%" and min-width: 100%"
html{
min-height: 100%;
min-width:100%;
}

Answer 2

Use background-size.
CSS3 gradients can be considered as functions that generate a fixed-sized image, so they still need to be controlled with the size property.

Answer 3

In IE9 there was some margin around the edge of the gradient. You should set your body and html to have no margin. Is that what you were having a problem with?
html,body {
margin: 0;
}
Note this wasn't an issue for me in other browsers.