Making gradient background fill page with css

Problem

I have this gradient background but I don't want it to repeat the way it does to fill the page, I want it to be one large gradient that fills the page.

html:

<!DOCTYPE html>
<head>
    <meta charset = "UTF-8"/>
    <title>Home</title>
    <link rel="stylesheet" text="text/css" href="css.css">
</head>
<body>
    </body>

CSS:

p {
    font-family:"Arial Black";
    line-height:120%;
}
html {
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background: #70bg32;
    background-repeat:no-repeat;
    background: -webkit-linear-gradient( to left top, blue, red);
    background: -moz-linear-gradient( to left top, blue, red);
    background: -ms-linear-gradient( to left top, blue, red);
    background: -o-linear-gradient( to left top, blue, red);
    background: linear-gradient( to left top, blue, red);
}

http://jsfiddle.net/F7vf9/

Problem courtesy of: user2391236

Solution

To have the gradient fill the viewport, give the <html> element a height of 100%: fiddle

html {
    height: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background: #70bg32;
    background-repeat:no-repeat;
    background: -webkit-linear-gradient( to left top, blue, red);
    background: -moz-linear-gradient( to left top, blue, red);
    background: -ms-linear-gradient( to left top, blue, red);
    background: -o-linear-gradient( to left top, blue, red);
    background: linear-gradient( to left top, blue, red);
}

To prevent the gradient from repeating past the visible section of the viewport (assuming there was a scrollbar), replace height: 100%; with min-height: 100%;.

Solution courtesy of: Adrift

Discussion

As of today, none of the above are working. The linear gradient is repeating itself.

To stretch the gradient over the entire page you have to add this in the css:

body {
  background: linear-gradient(to left top, blue, red) fixed;
}

That's all.

Discussion courtesy of: Techno.Shaman

I agree with Adrift, adding height: 100% to the html tag will stretch the gradient. You can also remove the background-size: cover. This also works:

html {
  height: 100%;
}
body {
  width: 100%;
  background: linear-gradient(to left top, blue, red);
}

You should be able to add the rest of the linear gradients for other browsers without any issues. Hope this helps!

Discussion courtesy of: CodeEngie

This recipe can be found in it's original form on Stack Over Flow.