0

I want my website background to have the top 55% be one color and the bottom 45% to be another color. Based on the tutorial here (I am using green, 80% and 20% to make the size difference easier to spot)

background: -webkit-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,0) 80%, rgba(255,255,255,0.2) 80%, rgba(255,255,255,0.2) 20%);
background: -moz-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,0) 80%, rgba(255,255,255,0.2) 80%, rgba(255,255,255,0.2) 20%);
background: -o-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,0) 80%,     rgba(255,255,255,0.2) 80%, rgba(255,255,255,0.2) 20%);
background: -ms-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,0) 80%,     rgba(255,255,255,0.2) 80%, rgba(255,255,255,0.2) 20%);

background: linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,0) 80%,     rgba(255,255,255,0.2) 80%, rgba(255,255,255,0.2) 20%);
background-color: green;

But it's a bit hard to follow and I am unable to get the functionality I want. Right now, it repeats the gradient all the way down the screen but I do not know why. Removing the second rgba() entries breaks it entirely and that was the only trail I thought to follow.

1

1 Answer 1

3

If you apply this background to the body, make sure to add this css :

html {height: 100%;}

Otherwise, the body won't take the entire page height.

See this Fiddle

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.