My css gradient doesn't stretch, it repeats

Question

body{
padding:0;
margin:0;
font:normal 12px/16px Arial, Helvetica, sans-serif;
color:#383634;
background-image: -webkit-gradient(
linear,
left top,
left bottom,
colo         


        

Answer 1

Your original code: http://jsfiddle.net/ecKR4/7/

If you want the gradient to stretch the entire height of the page:

html {
    min-height: 100%
}

With little content: http://jsfiddle.net/ecKR4/1/
With lots of content: http://jsfiddle.net/ecKR4/2/

If you want the gradient to be fixed and as high as the viewport:

html {
    height: 100%
}
body {
    background-attachment: fixed
}

With little content: http://jsfiddle.net/ecKR4/3/
With lots of content: http://jsfiddle.net/ecKR4/4/

If you want the gradient to be as high as the viewport, and then the background colour:

html {
    height: 100%
}
body {
    background-repeat: no-repeat;
    background-color: #669966; /* ending colour of gradient */
}

With little content: http://jsfiddle.net/ecKR4/5/
With lots of content: http://jsfiddle.net/ecKR4/6/