So I'm trying to get my gradient working on my HTML tag so it shows in the background but I noticed certain colors show off as more blocky than others. I want the whole background to be a gradient and after researching (here and other sites) I got this far but it looks like multiple blocks instead of a gradient like other colors seem to have. How can I fix this so the whole background doesn't move when scrolling and doesn't show blocks? I've only ever used gradients in scripts before so I don't like using it.
I found this as a close solution but I'm trying to avoid scripts at all costs as mentioned above.
html
{
min-height: 100%; /*needed for no repeat color. adding normal "height" messes it up*/
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background: #FFA5A5; /* Older browsers */
background: linear-gradient(#FFA5A5, #FFFFFF);
background: -moz-linear-gradient(top, #FFA5A5 0%,#FFFFFF 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFA5A5), color-stop(100%,#FFFFFF)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #FFA5A5 0%,#FFFFFF 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #FFA5A5 0%,#FFFFFF 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #FFA5A5 0%,#FFFFFF 100%); /* IE10+ */
background: linear-gradient(top, #FFA5A5 0%,#FFFFFF 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFA5A5', endColorstr='#FFFFFF',GradientType=0); /* IE6-9 */
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>t</title>
<meta name="description" content="c">
<meta name="author" content="a">
<link rel="stylesheet" type="text/css" href="GBG.css">
</head>
</html>