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.
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
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%);
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With