CODEWITHSUNDEEP
htmlcss
ray
ray

Reputation: 933

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.

Upvotes: 11

Views: 18205

Answers (3)

Tigran
Tigran

Reputation: 116

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.

Upvotes: 0

Paulie_D
Paulie_D

Reputation: 114991

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);
}

Upvotes: 4

Fhtagn
Fhtagn

Reputation: 773

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

Upvotes: 22

Related Questions