Help using a gradient
I am trying to create a background for a web page that takes advantage of the gradient capabilities in CSS3. What I want is to use a gradient that fills the entire height of the screen, and then if the screen scrolls outside of it, just use the last color.
Unfortunately, all my attempts end up with either repeating or constant gradient. Neither is acceptable for what I mean.
Can any of you help me? The closest I could get across so far can be found below, but obviously it stays fixed. Everything I tried pretty much repeated the problem, even without re-incorporating into the mix.
html {
height: 100%
}
body {
background: gold no-repeat linear-gradient(silver, orange, gold);
background-attachment: fixed;
min-height: 100%;
margin: 0px;
}
source to share
Actually, it will look like this:
html {
height: 100%;
}
body {
background: linear-gradient(red, orange, gold) no-repeat, gold;
background-size: 100%;
margin: 0px;
}
div {
min-height: 200vh;
}
Here is a fiddle https://jsfiddle.net/v14m59pq/163/
source to share
You can use multiple background
and stack them like in the snippet below, where the first background is yours linear-gradient
and the second is a solid color (which is the same as the final gradient color).
Without repeating the gradient (using no-repeat
), we can constrain the gradient to be present only for the screen height, while the default solid background color will go through full size.
Here's what MDN says about multiple background stacking: link
They are stacked on top of each other with the first background you specify at the top and the last background that you specify in reverse order. Only the last background can include the background color .
(emphasis mine)
html {
height: 100%;
}
body {
background: linear-gradient(silver, orange, gold, red) no-repeat, gold;
margin: 0px;
}
/* Just for demo */
div {
min-height: 200vh;
}
<!-- Library included just to avoid prefixes so that users with older browser can view -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div>
Some content....
</div>
Note. I added red in linear-gradient
to show how the solid color takes over from the point where the gradient ends.
source to share
Hope this helps you.
If you want this effect, you need two layers, a back layer with the final color and a top one with a gradient.
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
background-color: gold;
}
body {
height: 100%;
background: gold no-repeat linear-gradient(silver, orange, gold);
}
I am using html with gold color and body with gradient, just means the parent foreground color and children have a gradient with full viewport height.
Check the link to see the result :) http://codepen.io/TibicenasDesign/pen/VLywpL
source to share