Css applying linear-gradient to body of document

Question

I am trying to make this gradient appear on entire body of document, but instead it just shows only on the top. Is there anyway to fill it up entire body? I am using firefox if that makes difference.

body {
        height: 100%;
        background-image: linear-gradient(to top, blue 80%, green 0);
    }

You would be better off using an image instead of that gradient, its just 2 lines, no gradient. You are also missing a few fallbacks etc.. I recommend:colorzilla.com/gradient-editor — Mark
– Mark, Commented Mar 26, 2015 at 16:42
@Mark Why use an image instead? That's an additional http request. — Tony Barnes
– Tony Barnes, Commented Mar 26, 2015 at 16:44
@TonyBarnes, yes normally, but for something that simple, a small image is better than having to css for multiple browsers and fallbacks — Mark
– Mark, Commented Mar 26, 2015 at 16:48
Sometimes it's tempting to use webkit's drawing features, like -webkit-gradient, when it's not actually necessary - maintaining images and dealing with Photoshop and drawing tools can be a hassle. However, using CSS for those tasks moves that hassle from the designer's computer to the target's CPU. Gradients, shadows, and other decorations in CSS should be used only when necessary (e.g. when the shape is dynamic based on the content) - otherwise, static images are always faster. On very low-end platforms, it's even advised to use static images for some of the text if possible. — Mark
– Mark, Commented Mar 26, 2015 at 16:50

Tony Barnes · Accepted Answer · 2015-03-26 16:51:12Z

2

You need to define a 100% height for the html and body tags:

html,
body {
  height:100%;
}


body {
  background:#BAF7C8;
  background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0, #BAF7C8),
    color-stop(1, #5C93DB)
  );
  background-image: -o-linear-gradient(top, #BAF7C8 0%, #5C93DB 100%);
  background-image: -moz-linear-gradient(top, #BAF7C8 0%, #5C93DB 100%);
  background-image: -webkit-linear-gradient(top, #BAF7C8 0%, #5C93DB 100%);
  background-image: -ms-linear-gradient(top, #BAF7C8 0%, #5C93DB 100%);
  background-image: linear-gradient(to top, #BAF7C8 0%, #5C93DB 100%);
}

(gradient generated from css3factory).

Notice there is a regular background colour fallback as well.

You could generate the gradients automatically with autoprefixer.

JSFiddle

answered Mar 26, 2015 at 16:51

Tony Barnes

2,6431 gold badge21 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Bob Sforza · Accepted Answer · 2015-03-26 16:50:55Z

0

Here is the proper code to make sure you get your linear gradient.

html {
  width: 100%;
  height: 100%;
}

body {  
  background-image: linear-gradient(0deg ,white, orange);
}

This method works in almost all modern browsers. Hope this helped.

answered Mar 26, 2015 at 16:50

Bob Sforza

12 bronze badges

Collectives™ on Stack Overflow

Css applying linear-gradient to body of document

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related