CODEWITHSUNDEEP
htmlcssbackgroundgradientlinear-gradients
Pipeline
Pipeline

Reputation: 1059

HTML/CSS - linear gradient not taking up full screen

If I have the following CSS property for my body:

body {

 background-color: red;
 background-image: linear-gradient(red, orange);
}

Then the gradient appears on my web page but it does not take up the full screen size (I have a big monitor). It appears as below: Is this a issue with the footer? I do not have a footer currently.

enter image description here

enter image description here

Upvotes: 13

Views: 21707

Answers (3)

aswzen
aswzen

Reputation: 1632

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

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. Works best with gradient background.

Check out the doc here

Upvotes: 32

Pipeline
Pipeline

Reputation: 1059

The answer was actually the margin property.

body, html {
  height: 100%;
  width: 100%;
  margin: 0;
}

Upvotes: 1

Nenad Vracar
Nenad Vracar

Reputation: 122057

Try this DEMO

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

body {
  background: rgba(231,56,39,1);
  background: -moz-linear-gradient(top, rgba(231,56,39,1) 0%, rgba(231,56,39,1) 27%, rgba(255,166,0,1) 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(231,56,39,1)), color-stop(27%, rgba(231,56,39,1)), color-stop(100%, rgba(255,166,0,1)));
  background: -webkit-linear-gradient(top, rgba(231,56,39,1) 0%, rgba(231,56,39,1) 27%, rgba(255,166,0,1) 100%);
  background: -o-linear-gradient(top, rgba(231,56,39,1) 0%, rgba(231,56,39,1) 27%, rgba(255,166,0,1) 100%);
  background: -ms-linear-gradient(top, rgba(231,56,39,1) 0%, rgba(231,56,39,1) 27%, rgba(255,166,0,1) 100%);
  background: linear-gradient(to bottom, rgba(231,56,39,1) 0%, rgba(231,56,39,1) 27%, rgba(255,166,0,1) 100%);

}

Upvotes: 2

Related Questions