CSS gradients and background images
Color gradients are frequently used on web pages so let's go through the basics.
The two CSS features we will use here are regular background images and CSS gradients. Background images are pretty reliable but some surfers might turn off images to save on bandwidth (due to cost or slow connection) and CSS gradients are only supported by newer web browsers so we need a fallback solution in both cases, background-color.
We will use a two-color, vertical gradient. With background images, the fallback background-color should match the top or the bottom of the gradient image so that if the image doesn't cover its element we will get a smooth transition. Pick the top or bottom color (and adjust background-position accordingly) so that you get the best contrast between text and background-color.
If you choose to not use a background image, you might want to use a color from the middle of the gradient. Just choose something that gives a similar look and good contrast.
Using background images
We need someting like the following code if we want to use a background image for the gradient.
.backgroundimage {
background-color: #00FE68;
background-image: url(/static/post39/gradient.png);
background-position: top left;
background-repeat: repeat-x;
height: 200px;
}
The background image is positioned to the top and the background color matches the lower edge of the background image. This ensures a decent looking element even if we don't know the exact height.
If you have many different gradients in your page, consider combining them into one image with a CSS sprite. This works well for elements with a limited size, like captions, buttons and icon backgrounds.
CSS gradients
The code for a CSS gradient is slightly more complicated due to the currently experimental status of the feature. You will have to use vendor prefixes for Opera, Mozilla, Webkit and IE browsers and add the W3C standard code at the end to future-proof your code. There are more options built into linear-gradient but for a simple two-color gradient you just need to specify a start color (#004100) and an end color (#00FE68).
Note that the linear gradient is applied as a background image, not a background color.
.cssgradient {
background-color: #00FE68;
background-image: -moz-linear-gradient(#004100, #00FE68); /* Mozilla */
background-image: -ms-linear-gradient(#004100, #00FE68); /* IE 10 */
background-image: -o-linear-gradient(#004100, #00FE68); /* Opera */
background-image: -webkit-linear-gradient(#004100, #00FE68); /* Chrome, Safari */
background-image: linear-gradient(#004100, #00FE68); /* W3C standard */
height: 200px;
}
What to use
Most web browsers now support CSS gradients, even IE <= 9 can be fixed via Microsofts filter functions. So unless IE support is important and the filter function breaks something, CSS gradients seem to be the best choice even thoght the code is a little messy.
Background images require more bandwidth, are less flexible and harder to create so it is generally more effective to use CSS gradients.