don't want cover to repeat this gradient

Report · Jan 13, 2017

Hi,

I do not want this cover to repeat. It is a gradient. As you can see, no-repeat is applied, but I am finding that when my page begins to scroll, the gradient re-starts itself.

#gradient {

height: 100%;

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

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6dbd7', endColorstr='#8481bc',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

}

Thanks!

Report · Jan 13, 2017

In what browser? - seems to be ok here in Mac - Firefox, Chrome and Safari.

Report · Jan 13, 2017

Try using background-size: contain;

Report · Jan 13, 2017

Just looked at your code again.

If you are applying your gradient id to a page as a container for that pages code, then the css gradient will be for the entire page.

Also I would not recommend using the IEFilter to apply a gradient to a complete page, unless you know about the problems, (and how to fix them) that this causes with IE's cleartype feature, (fuzzy text).

Report · Jan 18, 2017

Hi,

Here is where I have it applied. It is still not working. I tried changing to 'contain' vs. cover. Just above the footer, it stops sharply and begins to repeat.

I removed the IEFilter. Thank you.

Report · Jan 18, 2017

Don't ever apply a style to the html element, except for occasionally applying a default font.

the html covers the entire browser not just your page, and will cause unexpected behaviour of the applied style.

To give you an idea, the html element begins somewhere in the direction of the top left corner of the browser, unlike the body element which starts at the top left corner of the viewport.

Report · Jan 18, 2017

r_tist wrote:
Hi,
Here is where I have it applied. It is still not working. I tried changing to 'contain' vs. cover. Just above the footer, it stops sharply and begins to repeat.
<html class="full" lang="en" id="gradient">
I removed the IEFilter. Thank you.

Just put it on a <div> and then include all your page code inside the 'gradient' <div>:

</div>

#gradient {

height: 100vh;

-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+

}

Report · Jan 18, 2017

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;

}

Report · Jan 18, 2017

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>

<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>

<p>Gradient</p>

</div>

</body>

</html>

Report · Jan 24, 2017

This worked out. Thank you.

don't want cover to repeat this gradient

1 Correct answer