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)?
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;
}
The html
is not full height. It is probably something like eight pixels tall. So setting the background image to a linear gradient executes that gradient over eight pixels. The default behavior for background images is to repeat indefinitely. That is why the eight pixel gradient is repeated over and over.
If you add background-repeat: no-repeat
you'll see just one small gradient, and if you set the height to 100%
you'll see the gradient expand to fill the element.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.