How to make it so linear-gradient does not repeat - css

Question

I have the following css:
header {
background-color: #5A775A;
position: relative;
top: -25px;
width: 100%;
height: 10%;
color: white;
}
h1 {
position: relative;
left: 60px;
top: 20px;
}
html {
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(bottom, #000000 0%, #5A775A 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(bottom, #000000 0%, #5A775A 100%);
/* Opera */
background-image: -o-linear-gradient(bottom, #000000 0%, #5A775A 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #000000), color-stop(1, #5A775A));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(bottom, #000000 0%, #5A775A 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to top, #000000 0%, #5A775A 100%);
}
Which is producing the following design:
As you can see the gradient is repeating. How do I make it so it does not repeat vertically, and it is just one long gradient across the entire page?
EDIT:
Trying to use
background-size: 100% 100%;
background-repeat: no-repeat;
Produces:
The problem with this is it does not span across the entire screen.

Answer 1

Simply use
background-size: 100% 100%;
background-attachment: fixed;

Answer 2

With background-repeat: no-repeat; add: background-size: cover;