Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

distinct background gradient

distinct background gradient

Problem

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.

Problem courtesy of: jokulmorder

Solution

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

Solution courtesy of: Brewal

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

distinct background gradient

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×