I wanted to make a rather simple double-CSS3 gradient background, which would look like the one in use on my website now. I can't, however, conjure up the code to get both gradients working at once. Can anyone help me? The background image: http://theapplenewsreel.com/Photos/background-main.jpg Once you see it, you'll understand why I want to get rid of the image. Banding on the gradients, plus the 715kb size, make for a cumbersome file.
1
-
Question belongs on StackOverflow– DA01Feb 13, 2012 at 4:22
Add a comment
|
2 Answers
You might try here: Ultimate CSS Gradient Genrator
background: #2c2c2c;
background: -moz-linear-gradient(top, #2c2c2c 0%, #ffffff 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2c2c2c), color-stop(100%,#ffffff));
background: -webkit-linear-gradient(top, #2c2c2c 0%,#ffffff 100%);
background: -o-linear-gradient(top, #2c2c2c 0%,#ffffff 100%);
background: -ms-linear-gradient(top, #2c2c2c 0%,#ffffff 100%);
background: linear-gradient(top, #2c2c2c 0%,#ffffff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2c2c2c', endColorstr='#ffffff',GradientType=0 );
-
Thanks for your help so far, that works for the dark grey to light grey gradient. Is there any way to also (simultaneously) include the gradient for the center column? It doesn't show up using the above code.– JulesFeb 11, 2012 at 5:21
-
1You can't have that dark-light-dark stripe pattern in a single gradient. You would need multiple columns in the design (code) and apply the needed gradient to the column. In other words, the white stripe is not possible with a single css gradient.– ScottFeb 11, 2012 at 6:13
Alright, I figured out how to do that: I made a 100% height 1000px width container , and set the background to a CSS gradient generated by that gradient generator you suggested.