CODEWITHSUNDEEP
htmlcss
user2391236
user2391236

Reputation:

Making gradient background fill page with css

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/

Upvotes: 41

Views: 136300

Answers (7)

Techno.Shaman
Techno.Shaman

Reputation: 1433

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*/
}

Upvotes: 117

aswzen
aswzen

Reputation: 1632

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.

Upvotes: 12

imatwork
imatwork

Reputation: 573

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.

Upvotes: 1

Erik Burns
Erik Burns

Reputation: 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!

Upvotes: 2

Adrift
Adrift

Reputation: 59799

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

Upvotes: 65

Jeffrey
Jeffrey

Reputation: 110

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

Upvotes: 0

CodeEngie
CodeEngie

Reputation: 427

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!

Upvotes: 9

Related Questions