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, 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 */ 

It goes most of the way down, then repeats

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/