'linear-gradient doesn't work when applied to body

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.

htmlcss


Solution 1:[1]

The body has no height of it's own as such without the HTML having a height or the body containing content.Then the gradient will repeat because repeat is the default in the background shorthand property.

html {
  height: 100%;
}
body {
  background: linear-gradient(#10416b, black);
}

Solution 2:[2]

Firstly, I'd like to thank @Paulie_D who inspired me to come up with this answer.

Below you can see 2 methods to get your body have a gradient background.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>My awesome webpage</title>

        <style>
            html {
                min-height: 100%;    /* Unlike 'height', which is used by
                                        @Paulie_D, this will make your webpage
                                        automatically resize when it exceeds
                                        the 100% height, thus it won't start the
                                        gradient over
                                      */
            }

            body {
                background: linear-gradient(  180deg,

                                              #C0C0AA     0%,
                                              #1CEFFF   100%
                                          );
            }


            /***** Content design *****/

            #hello {
                font-family: sans-serif;
                font-size:   5em;
                text-align:  center;

                color:       #424242;
                text-shadow: 0 0 1rem darkgray;

                transition:  0.25s;
            }

            #hello:hover {
                font-size:   100vh;
                color:       darkgray;
            }
        </style>
    </head>

    <body>
        <div id="hello">Hover and scroll!</div>
    </body>
</html>

This method will automatically resize the gradient to fit the whole content.

If you want the gradient to be the size of the window height, you can use a `::before` pseudoelement on `body`, to draw a fix-positioned gradient with a `z-index` of `-1`. Like this: 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>My awesome webpage</title>

        <style>
            body::before {
                content: "";

                background: linear-gradient(  180deg,

                                              #C0C0AA     0%,
                                              #1CEFFF   100%
                                          );

                top:    0;
                bottom: 0;
                left:   0;
                right:  0;

                position: fixed;

                z-index: -1;
            }
            
            
            /***** Content design *****/

            #hello {
                font-family: sans-serif;
                font-size:   5em;
                text-align:  center;

                color:       #424242;
                text-shadow: 0 0 1rem darkgray;

                transition:  0.25s;
            }

            #hello:hover {
                font-size:   100vh;
                color:       darkgray;
            }
        </style>
    </head>

    <body>
        <div id="hello">
            Hover and scroll!
        </div>
    </body>
</html>
Sorry, I don't usually answer Stack Overflow questions, but this was a top result of a Google query, so I couldn't resist. If you can improve this answer, please request an edit.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Paulie_D
Solution 2 Tigran's Tips

Related Questions