Making gradient background fill page with css

Question

I have this gradient background but I don't want it to repeat the way it does to fill the page, I want it to be one large gradient that fills the page.

html {
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background: #70bg32;
  background-repeat: no-repeat;
  background: -webkit-linear-gradient(to left top, blue, red);
  background: -moz-linear-gradient(to left top, blue, red);
  background: -ms-linear-gradient(to left top, blue, red);
  background: -o-linear-gradient(to left top, blue, red);
  background: linear-gradient(to left top, blue, red);
}

http://jsfiddle.net/F7vf9/

score 111 · Answer 1 · edited Feb 22 '22 at 13:02

111

As of today, none of the above are working. The linear gradient is repeating itself.

To stretch the gradient over the entire page you have to add this in the css:

body {
    background:            linear-gradient(to left top, blue, red);
    background-attachment: fixed; /*edit*/
}

edited Feb 22 '22 at 13:02

Kermit

4,922
4
42
74

answered Jul 29 '15 at 23:23

Techno.Shaman

1,373
1
9
9

A fixed background doesn’t move as you scroll. I think the parent wanted the background to fill the entire height of the page, not just the viewport. The `min-height` trick from above is better for that. – David Regev May 04 '18 at 23:06
Good solution. Check out `background-attachment` property https://stackoverflow.com/a/18094317/5739514 – Kermit Feb 22 '22 at 13:01

score 66 · Accepted Answer · edited Nov 22 '19 at 14:10

To have the gradient fill the viewport, give the <html> element a height of 100%: fiddle

html {
    height: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background: #70bg32;
    background-repeat:no-repeat;
    background: -webkit-linear-gradient( to left top, blue, red);
    background: -moz-linear-gradient( to left top, blue, red);
    background: -ms-linear-gradient( to left top, blue, red);
    background: -o-linear-gradient( to left top, blue, red);
    background: linear-gradient( to left top, blue, red);
}

To prevent the gradient from repeating past the visible section of the viewport (assuming there was a scrollbar), replace height: 100%; with min-height: 100%;.

html {
    height: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background: #70bg32;
    background-repeat:no-repeat;
    background: -webkit-linear-gradient( to left top, blue, red);
    background: -moz-linear-gradient( to left top, blue, red);
    background: -ms-linear-gradient( to left top, blue, red);
    background: -o-linear-gradient( to left top, blue, red);
    background: linear-gradient( to left top, blue, red);
}

So this basically breaks when the page has content that is longer than 100% (scrolls) from what I've seen... http://jsfiddle.net/mMBMf/173/ — drew covi, Jan 26 '15 at 14:49
@drew covi: True, but replacing `height: 100%;` with `min-height: 100%;` seems to do the trick at least in FF. — Adrift, Jan 31 '15 at 15:25

score 11 · Answer 3 · answered Jul 04 '20 at 19:05

Got the same problem but only this one is working, please add this style

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.

score 8 · Answer 4 · answered May 30 '13 at 16:45

I agree with Adrift, adding height: 100% to the html tag will stretch the gradient. You can also remove the background-size: cover. This also works:

html {
  height: 100%;
}
body {
  width: 100%;
  background: linear-gradient(to left top, blue, red);
}

You should be able to add the rest of the linear gradients for other browsers without any issues. Hope this helps!

score 2 · Answer 5 · answered Jan 18 '20 at 22:21

None of the above answers were 100% satisfying to me, because I wanted a bit more precise control over the gradient and background colors. Here were my own requirements, and how I solved it in code:

If content is < 100% viewport height, gradient scales to fill viewport
If content is >= 100% viewport height, gradient scales with content w/o repeat
If user drags up or down on viewport, they see a custom color (not white)

<html>
  <body>
    <div class="wrapper">
      <div class="content">
        <h1>Content goes here</h1>
      </div>
    </div>
  </body>
</html>

html {
  margin: 0; padding: 0;
}
body {
  margin: 0; padding: 0;
  background-color: blue;
}
.wrapper {
  padding: 0; margin: 0;
  min-height: 100%;
  background: linear-gradient(180deg, blue, red);
}
.wrapper .content {
  padding: 40px; /* Put any padding or styles here you want, it won't break gradient */
}

While I am generally not a fan of extra wrappers in markup, they did allow me to achieve full control of the viewport, full page, and background drag coloring, with the added benefit of slightly simplified CSS. Enjoy!

score 1 · Answer 6 · answered Apr 15 '20 at 10:48

This is a great answer for this: https://css-tricks.com/perfect-full-page-background-image/

html {
  background: linear-gradient(-60deg, #23e2cb 30%, black 30%), transparent 0;
  background-repeat:no-repeat;
  min-height: 100%;
  min-width: 1024px;

  width: 100%;
  height: auto;
}

-60deg So it puts a 120 degree angle (a bit like that -> / ) on the right side of my page, hence the minus and puts it at 30% of the page from the right side with the colour #23e2cb. So I am setting the other colour to black with a gradient of 30% so the line stays defined. If I set the black to 40% there is no definition in the line, it uses that extra 10% to gradually change from black to blue.

score 0 · Answer 7 · edited Jul 03 '19 at 16:41

0

In case anyone needs it still:

I got mine to work by increasing the height of the section which has the gradient background to above 200%.

(I included the no repeat and cover but it had no effect)

mySection {
    width: 100%;
    height: 220%; 
    background: linear-gradient(90deg, rgb(23, 156, 57) 5%, rgb(33, 211, 27) 60%)
                center center no-repeat/ cover;
}

edited Jul 03 '19 at 16:41

Yassine CHABLI

3,459
2
23
43

answered Jul 03 '19 at 15:13

Jeffrey

75
9

Making gradient background fill page with css

7 Answers7

Linked

Related