Mi gradiente de CSS no se estira, se repite

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, 
color-stop(0.18, rgb(74,12,107)), 
color-stop(0.87, rgb(102,153,102)) 
); 
background: -moz-linear-gradient(top, #4a0c6b 0%, #669966 100%); /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4a0c6b),   color-stop(100%,#669966)); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(top, #4a0c6b 0%,#669966 100%); /* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(top, #4a0c6b 0%,#669966 100%); /* Opera11.10+ */ 
background: -ms-linear-gradient(top, #4a0c6b 0%,#669966 100%); /* IE10+ */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4a0c6b', endColorstr='#669966',GradientType=0); /* IE6-9 */ 
background: linear-gradient(top, #4a0c6b 0%,#669966 100%); /* W3C */ 

No hace la mayor parte del camino hacia abajo, y luego repite

Answer 1

Su código original: http://jsfiddle.net/ecKR4/7/

Si desea que el gradiente se extienden a toda la altura de la página:

html { 
    min-height: 100% 
} 

con poco contenido: http://jsfiddle.net/ecKR4/1/
Con una gran cantidad de contenido: http://jsfiddle.net/ecKR4/2/

Si desea que el gradiente que se fijará y tan alto como el visor:

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

con poco contenido: http://jsfiddle.net/ecKR4/3/
Con una gran cantidad de contenido: http://jsfiddle.net/ecKR4/4/

Si desea que el degradado sea tan alto como la ventana gráfica, y luego el color de fondo:

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

con poco contenido: http://jsfiddle.net/ecKR4/5/
Con una gran cantidad de contenido: http://jsfiddle.net/ecKR4/6/