I've recently added a background gradient to my webpage to make it easier on the eyes, but now I've noticed that the page extends past the <html> element and continues scrolling. This also causes the background gradient to repeat below the <body> element.
Does anyone know why this is happening and how to prevent the page from scrolling beyond the <html> element or stop the background from repeating after the <html> tag?
Here's an example of what I'm experiencing:
https://i.stack.imgur.com/Jp48F.png
Below is the CSS code for the background gradient:
body{
background-repeat: no-repeat;
background: rgba(18,87,182,0); /* For browsers that do not support gradients */
background: -webkit-linear-gradient(rgba(86,213,251,1) 0%,rgba(18,87,182,0.5) 10%,rgba(255,0,0,0) 70%); /*Safari 5.1-6*/
background: -o-linear-gradient(rgba(86,213,251,1) 0%,rgba(18,87,182,0.5) 10%,rgba(255,0,0,0) 70%); /*Opera 11.1-12*/
background: -moz-linear-gradient(rgba(86,213,251,1) 0%,rgba(18,87,182,0.5) 10%,rgba(255,0,0,0) 70%); /*Fx 3.6-15*/
background: linear-gradient(rgba(86,213,251,1) 0%,rgba(18,87,182,0.5) 20%,rgba(255,0,0,0) 70%); /*Standard*/
}