How to make gradient background fill the entire page?

Question

I would like to have a gradient background fill the entire page/body. Here's what I've tried. It works, but after scrolling it doesn't stretch to the full height of the page.

body {
    width: 100%;
    height: 100%;
    background: #034b52 url(../../themes/images/bg.jpg) no-repeat center fixed;
    color: #fff;
}

body:after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: linear-gradient(to bottom, rgba(3, 75, 82, 1) 0%, rgba(3, 75, 82, 0) 100%);
    content: '';
    z-index: -1;
}

http://stackoverflow.com/questions/18094134/fixed-gradient-background-with-css use background-attachment: fixed ; on body tag and apply background to body tag — abhirathore2006, Sep 05 '16 at 10:13

score 13 · Answer 1 · answered Sep 06 '16 at 08:55

13

Apply the following CSS:

body {
     background: linear-gradient(to bottom, rgba(3,75, 82, 1) 0%, rgba(3,75, 82, 0) 100%);
    height: 100%;
    margin: 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

answered Sep 06 '16 at 08:55

Anuj

306
2
9

score 0 · Answer 2 · answered Jul 04 '20 at 19:04

0

Add this one

background-attachment: fixed;

The background-attachment property sets whether a background image scrolls with the rest of the page, or is fixed. There are three values: scroll, fixed, and local.

answered Jul 04 '20 at 19:04

aswzen

1,512
29
46

score -2 · Answer 3 · answered Sep 05 '16 at 10:45

-2

Try this

body{
  background: url("https://upload.wikimedia.org/wikipedia/commons/f/f0/Googlelogo1997.jpg") no-repeat center center, linear-gradient(green, blue);
height:100%;
 
}
html{height:100%;}

<body>
here we go
</body>

answered Sep 05 '16 at 10:45

Vipin Raunchhela

193
11

How to make gradient background fill the entire page?

3 Answers3