texto - gradiente lineal en css

Mi gradiente 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 */

Va casi todo el camino hacia abajo, luego se repite

Answer 1

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

Si desea que el gradiente estire toda la altura de la página:

html {
min-height: 100%
}

Con poco contenido: http://jsfiddle.net/ecKR4/1/
Con mucho contenido: http://jsfiddle.net/ecKR4/2/

Si desea que el gradiente sea fijo y tan alto como la ventana gráfica:

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

Con poco contenido: http://jsfiddle.net/ecKR4/3/
Con mucho 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 mucho contenido: http://jsfiddle.net/ecKR4/6/