Unwanted duplication with gradient background in CSS

Question

I'm creating a CSS stylesheet for a webpage. I want a gradient background for the whole webpage, but I can't figure out how to get the gradient to cover the whole webpage. Right now, the gradient is in the form of a typical banner which is replicated down through the website, like one "bar" on top of the other.

Any ideas on how to solve this?

The code I have so far:

body {
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FBFF94), color-stop(1, #00A3EF));
}

Answer 1

Use VH Unit, which is a Vertical Height.

Consider

100vh = 100%.

body {

    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FBFF94), color-stop(1, #00A3EF));

    height:100vh; /* vh = Vertical Height */
}

Example Here