The problem with this method is, if the <div> scrolls beyond the current viewport size, the gradient abruptly ends once the viewer scrolls.
The only way I've seen (using only css) that will keep a linear gradient from repeating, when used as a background of a page that scrolls past the opening content, is to fix the background-attachment.
On mobiles, background-attachment will fail (I guess fixed backgrounds are resource hogs), so I just don't use gradients there....
body{
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
background: rgba(166, 219, 215);
background: -moz-linear-gradient(-45deg, #a6dbd7 0%, #ffffff 55%, #8481bc 100%) fixed;
background: -webkit-linear-gradient(-45deg, #a6dbd7 0%,#ffffff 55%,#8481bc 100%) fixed;
background: linear-gradient(135deg, #a6dbd7 0%,#ffffff 55%,#8481bc 100%) fixed;
}
Jon Fritz II wrote: The problem with this method is, if the <div> scrolls beyond the current viewport size, the gradient abruptly ends once the viewer scrolls. The only way I've seen (using only css) that will keep a linear gradient from repeating, when used as a background of a page that scrolls past the opening content, is to fix the background-attachment. On mobiles, background-attachment will fail (I guess fixed backgrounds are resource hogs), so I just don't use gradients there.... body{ -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-repeat: no-repeat; background: rgba(166, 219, 215); background: -moz-linear-gradient(-45deg, #a6dbd7 0%, #ffffff 55%, #8481bc 100%) fixed; background: -webkit-linear-gradient(-45deg, #a6dbd7 0%,#ffffff 55%,#8481bc 100%) fixed; background: linear-gradient(135deg, #a6dbd7 0%,#ffffff 55%,#8481bc 100%) fixed; } |
Yes, or you could fix the gradient <div> itself.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Gradient</title>
<style>
body {
margin: 0;
}
#gradient {
position: fixed;
width: 100vw;
height: 100vh;
z-index: 1;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
background: rgba(166, 219, 215); /* Old browsers */
background: -moz-linear-gradient(-45deg, #a6dbd7 0%, #ffffff 55%, #8481bc 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, #a6dbd7 0%,#ffffff 55%,#8481bc 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #a6dbd7 0%,#ffffff 55%,#8481bc 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.content {
position: relative;
z-index: 2;
}
.content p {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="gradient">
</div>
<div class="content">
<p>Gradient</p>
<p>Gradient</p>
<p>Gradient</p>
<p>Gradient</p>
<p>Gradient</p>
<p>Gradient</p>
<p>Gradient</p>
<p>Gradient</p>
<p>Gradient</p>
<p>Gradient</p>
<p>Gradient</p>
<p>Gradient</p>
<p>Gradient</p>
<p>Gradient</p>
<p>Gradient</p>
<p>Gradient</p>
<p>Gradient</p>
<p>Gradient</p>
<p>Gradient</p>
<p>Gradient</p>
<p>Gradient</p>
<p>Gradient</p>
<p>Gradient</p>
<p>Gradient</p>
<p>Gradient</p>
<p>Gradient</p>
<p>Gradient</p>
<p>Gradient</p>
<p>Gradient</p>
<p>Gradient</p>
<p>Gradient</p>
<p>Gradient</p>
<p>Gradient</p>
<p>Gradient</p>
<p>Gradient</p>
<p>Gradient</p>
<p>Gradient</p>
<p>Gradient</p>
<p>Gradient</p>
<p>Gradient</p>
<p>Gradient</p>
<p>Gradient</p>
<p>Gradient</p>
<p>Gradient</p>
<p>Gradient</p>
<p>Gradient</p>
<p>Gradient</p>
<p>Gradient</p>
<p>Gradient</p>
<p>Gradient</p>
<p>Gradient</p>
<p>Gradient</p>
<p>Gradient</p>
<p>Gradient</p>
<p>Gradient</p>
<p>Gradient</p>
<p>Gradient</p>
<p>Gradient</p>
<p>Gradient</p>
<p>Gradient</p>
<p>Gradient</p>
<p>Gradient</p>
<p>Gradient</p>
<p>Gradient</p>
<p>Gradient</p>
<p>Gradient</p>
<p>Gradient</p>
<p>Gradient</p>
<p>Gradient</p>
<p>Gradient</p>
<p>Gradient</p>
<p>Gradient</p>
<p>Gradient</p>
<p>Gradient</p>
<p>Gradient</p>
<p>Gradient</p>
</div>
</body>
</html>
AdChoices