HTML/CSS - linear gradient not taking up full screen
10,088
Solution 1
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
Solution 2
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%);
}
Author by
Pipeline
Updated on June 04, 2022Comments
-
Pipeline almost 2 years
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.