CODEWITHSUNDEEP
htmlcss
Maxmansung
Maxmansung

Reputation: 63

Webpage extends beyond the HTML element

I have created a web page but have recently used the background gradient system to make it less harsh on the eyes. This has made me suddenly aware that the webpage extends past the point of the <html> element and continues to scroll further. This also causes the background gradient to repeat a second time below the <body> element.

Does anyone know a reason why this would happen and any way to either prevent the page from scrolling beyond the point of the <html> element or to prevent the background from repeating a 2nd time after the <html> tag?

Here is an example of it happening:

Example screenshot

Here is the CSS for the background:

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

Upvotes: 0

Views: 172

Answers (1)

codesayan
codesayan

Reputation: 1715

Try this, Add background-attachment: fixed; to your body,

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*/
    background-attachment: fixed;
}
<article>
    <section id="intro">
        <h1><strong>Welcome! </strong></h1>
        <br>
        <br>
        
        Writing goes here
        
        <strong> Please click <a>here</a> to begin helping with the alpha test.</strong>
    </section>
</article>

Upvotes: 2

Related Questions