CODEWITHSUNDEEP
htmlcss
wagnerdelima
wagnerdelima

Reputation: 360

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.

Upvotes: 2

Views: 114

Answers (3)

Kervon Ryan
Kervon Ryan

Reputation: 684

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

Upvotes: 2

kukkuz
kukkuz

Reputation: 42352

So there you are:

body{
  background: linear-gradient(to bottom, #F4F4F4 50%, #FFE0DA 50%);
  background-repeat: no-repeat;
  height: 200px;
}

How it works:

  1. to bottom specifies that the gradient flows from top to bottom.

  2. You should specify the color-stop in percentages - here #F4F4F4 stops at 50% and then at 50% #FFE0DA starts. So you get a two-color div without any gradient effect.

To get the gradient effect, just vary the color-stops:

body{
  background: linear-gradient(to bottom, #F4F4F4 10%, #FFE0DA 50%);
  background-repeat: no-repeat;
  height: 200px;
}

Thanks!

Upvotes: 1

Sylvain B
Sylvain B

Reputation: 550

Something like this : 

body {
	background: linear-gradient(to bottom,rgba(153,156,219,1) 0%,rgba(246,189,189,1) 60%);
    height:100%;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

Upvotes: 1

Related Questions