CODEWITHSUNDEEP
csslinear-gradients
Master Przemo
Master Przemo

Reputation: 35

Css applying linear-gradient to body of document

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

Upvotes: 0

Views: 405

Answers (2)

Tony Barnes
Tony Barnes

Reputation: 2643

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

Upvotes: 2

Bob Sforza
Bob Sforza

Reputation: 1

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.

Upvotes: 0

Related Questions