Forums

Jeager

Using the gradient generator from http://www.colorzilla.com/gradient-editor/

However when I copy the css and add it to my body, it turns the entire background white.

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(14%,rgba(255,255,255,1)), color-stop(30%,rgba(255,255,255,0.71)), color-stop(40%,rgba(255,255,255,0.53)), color-stop(44%,rgba(255,255,255,0.46)), color-stop(57%,rgba(255,255,255,0.28)), color-stop(70%,rgba(255,255,255,0.14)), color-stop(86%,rgba(255,255,255,0.02)), color-stop(100%,rgba(255,255,255,0)));

Thats the (obviously) webkit version. Its a simple white to transparent, but when applied, it just makes it all white. Any ideas?

TheDoc

Can you show us where you are using it? Working fine for me:
http://jsfiddle.net/DeBua/

Jeager

Cant give you a link atm, going to a meeting shortly, but in your example you used a different gradient, though I did plug mine into and made a black background and it did work. However, it still fails to work in actual use.

body {
	line-height: 1;
	font-size:62.5%;
	background:url(../images/background_gradient.png) repeat-x #5cbc04
	-webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(14%,rgba(255,255,255,1)), color-stop(30%,rgba(255,255,255,0.71)), color-stop(40%,rgba(255,255,255,0.53)), color-stop(44%,rgba(255,255,255,0.46)), color-stop(57%,rgba(255,255,255,0.28)), color-stop(70%,rgba(255,255,255,0.14)), color-stop(86%,rgba(255,255,255,0.02)), color-stop(100%,rgba(255,255,255,0)));
	font-family: Arial, Helvetica, sans-serif;
	}

As is right now, the background needs to be the solid green (5cbc04) and then the gradient needs to be at the top, going down, as white. I guess I could make the gradient white to green, however I figured it would be better if I made it white transparent with a background that the main and backup backgrounds would use.

chrisburton

That's the old gradient code I believe for older versions of webkit. @TheDoc has the new markup correct in his fiddle.

TheDoc

So you want it to go:

Green > White > Transparent?
http://jsfiddle.net/DeBua/11/

Jeager

No no, White to green. The way I wanted to use it was have the green be the normal default background, then the white to transparent over top of it. I can go white to green for the gradient and would be fine, was just trying something different, so if the user couldnt load a css3 gradient, the green background would still load, then a background image of a white > transparent would load up top.

http://people.ysu.edu/~jtpenezich is the site. Currently the white gradient is a image, and the green background is css.

But as for now, this is pretty much solved. Thanks for the help, I realized what I was doing wrong. Basically adding fallbacks instead of multiple.

treehouse : what would you like to learn today?

Forums

[Solved] Gradients