wagnerdelima wagnerdelima - 2 months ago 7
CSS Question

How to make a linear-gradient to fulfill two-coloured body in CSS

I've been trying to make that in CSS to my webpage:
linear-gradient

But the only thing I get is a repeated gradient over all page:
Don't know why

This is the code I'm using:



body {
background: @body-color;

background: -webkit-linear-gradient(#999cdb, #f6bdbd);
background: -moz-linear-gradient(#999cdb, #f6bdbd);
background: -o-linear-gradient(#999cdb, #f6bdbd);
background: linear-gradient(#999cdb, #f6bdbd);
}





That might be a simple thing, but I don't know what I am missing.

Answer

You need to specify a height. Use vh which simply means viewport height which is the height of the user's visible area of a web page. That way it would cover the entire height of the screen no matter the device.

The background-attachment property sets whether a background is fixed or scrolls with the rest of the page.

body {
  background: @body-color;

background: -webkit-linear-gradient(#999cdb, #f6bdbd);
  background: -moz-linear-gradient(#999cdb, #f6bdbd);
  background: -o-linear-gradient(#999cdb, #f6bdbd);
  background: linear-gradient(#999cdb, #f6bdbd);
  height: 100vh;
  background-attachment: fixed;
}