css - Webpage extends beyond the HTML element -
i have created web page have used background gradient system make less harsh on eyes. has made me aware webpage extends past point of <html>
element , continues scroll further. causes background gradient repeat second time below <body>
element.
does know reason why happen , way either prevent page scrolling beyond point of <html>
element or prevent background repeating 2nd time after <html>
tag?
here example of happening:
here css background:
body{ background-repeat: no-repeat; background: rgba(18,87,182,0); /* browsers 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*/ }
try this, add background-attachment: fixed;
body,
body{ background-repeat: no-repeat; background: rgba(18,87,182,0); /* browsers 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> begin helping alpha test.</strong> </section> </article>
Comments
Post a Comment