Menu
When I apply a linear gradient to the body in CSS like below
body
{
background: linear-gradient(#10416b, black);
}
It doesn't apply it to the entire web page, instead what happens is it is applied to the first half of the page, and then starts over from blue to black for the second half, (#10416b is a blue color). Adding in height:100%; to the body doesn't change anything.
I fixed the problem by doing the below in CSS
.background {
background: linear-gradient(#10416b, black);
height: 100%;
}
and this in HTML
<!DOCTYPE html>
<html class="background">
// lots of unrelated code in between the tags
</html>
But I still don't understand why setting the background with the linear gradient in the body didn't work. If somebody could explain this to me that would be great.
910
To create a linear gradient you must define at least two color stops. Color stops are the colors you want to render smooth transitions among. You can also set a starting point and a direction (or an angle) along with the gradient effect.
To create the gradient effect, use the shorthand “background” property in CSS and set the property to “linear-gradient.” You can then specify as many color stops as you want in parentheses. You can use any combination of HTML color names, hex color codes, RGB color codes, and HSL color values.
A color-stop's <color> value, followed by one or two optional stop positions, (each being either a <percentage> or a <length> along the gradient's axis). A percentage of 0% , or a length of 0 , represents the start of the gradient; the value 100% is 100% of the image size, meaning the gradient will not repeat.
A linear gradient is horizontal, i.e the gradient colors appears as one on top of the other but for the radial, it takes a shape of either an oval or circle. A linear gradient progress in linear way,whereas radial gradient propagate either in a circle or ecliptic way.
Use 100vh instead of 100%
body {
height: 100vh;
background: linear-gradient(#10416b, black);
}
https://jsfiddle.net/r77r0cco/1/
body in and of itself doesn't have a height, so it looks to its parent element <html> which, because it has no content, also has no height.
vh uses the viewport dimensions instead of a parent element's
148
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
