Why linear gradient is applied to just 1% of the page (CSS)?

Question

When I tried to apply the linear gradient to a page in html using html tag in css the result is many tight strips, each one has it's own gradient.

html

    {
    background-image:linear-gradient(to top, black, white);
    }

but when I specified the height to be 100% it was applied to the hole page:

html
{background-image:linear-gradient(to top, black, white);
height:100%;
}

and when I specified the height to be 1% the result was the same strips with same height.

I'm confused and I don't know the reason behind that and why by default it's applied to just 1% despite I use the html tag (the root tag)?

Answer 1

Don't use background-image but background only, and add background-attachment.

If You use background-image and set height:100% for html while scrolling, You'll lose gradients.

Try this (just background and without height):

html
{
    background:linear-gradient(to top, black, white);
    background-attachment:fixed;
}