Assistance with Gradient Background

Question

I'm attempting to create a background for a webpage that takes advantage of the gradient options in CSS3. What I want it to do is use a gradient that fills the full height of the screen, and then if the screen is scrolled beyond that, to just use the final color.

Unfortunately, all of my attempts end up with either the gradient repeating or staying fixed. Neither of these are acceptable for what I have in mind.

Could any of you help me? The closest I could get so far can be found below, but obviously it stays fixed. Everything else I've tried has pretty much had a repeating issue, even with no-repeat thrown into the mix.

html {
    height: 100%
}

body {
    background: gold no-repeat linear-gradient(silver, orange, gold);
    background-attachment: fixed;
    min-height: 100%;
    margin: 0px;
}

Answer 1

Actually, it would 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/

Answer 2

Hope this help you man.

If you want that effect, you need two layers, back layer with the final color and the top layer with the gradient.

* {
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
  background-color: gold;
}

body {
  height: 100%;
  background: gold no-repeat linear-gradient(silver, orange, gold);
}

I use the html with a gold color and the body with the gradient, simply means, the parent the main color and the children the gradient with the full viewport height.

Check link to see the result :) http://codepen.io/TibicenasDesign/pen/VLywpL

Answer 3

You could make use of multiple backgrounds and stack them like in the below snippet where the first background is your linear-gradient and the second one is a solid color (which is same as the linear gradient's end color).

By not repeating the gradient (using the no-repeat), we can limit the gradient to be present only for the screen's height whereas the solid color background would by default run through the full size.

Here is what MDN says about multiple background stacking: ^link

These are layered atop one another with the first background you provide on top and the last background listed in the back. Only the last background can include a background color.

^{(emphasis is 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 have added a red end color to the linear-gradient just to show how the solid color takes over from the point where the gradient ends.