Trying to make the background a gradient

My weather app is almost done. I wanted to try to make the background a gradient, but for some reason it makes little stripes instead of a gradient across the whole page. The current css is exactly what I found on w3schools (I think), but I’ve been fiddling with it and not able to get what I want. Any ideas? Thanks!

Link to my pen:

Hello !

You are specifying a percentage height for the body, and this value is relative to it’s parent element, which in this case is html.

In order for this to work, simply add a css rule for html where you put it’s height to 100% !

Hope it helps :slight_smile:

Yes, that worked! I’m not sure if I fully understand why it worked, but I’ll read some more and figure it out.

Thanks a lot!

1 Like

When you are specifying an height in pixels, it’s just that: a determined value, and it ends there.

But when you are specifying a percentage value (for anything in CSS), always ask yourself " Okay, this is 100% height, but of what ?"

If you have a big box named html which has an height of 1000px, and inside of it another box named body which have an height of 100%, you can be sure it’s height will be the same as it’s parent,

The same goes when defining font size, or any other values, it’s always relative to its parent element.

1 Like

Okay that makes sense. I was thinking that the body was the biggest thing on the page and everything was inside of the body, but I guess the body is within the html. I think before when I have set a background color, it wasn’t apparent that the same thing was happening because it was all one color.

Anyway, thanks for the help, I really appreciate it.

1 Like