HTML and CSS Reference
In-Depth Information
Background image sizing is supported in some form by Firefox 3.6+,
Safari 3+, Chrome 4+, Opera 9.5+, and IE9+.
The
background
property is getting another enhancement with a feature
that allows for the definition of a color
<gradient>
value to take the
place of a more conventional file-based
background-image
.
Color gradients are lighter weight and more flexible than attempting to
create the properly sized gradient via an image file in Photoshop or other
graphic creation tool. Gradients can be linear or radial and can optionally
transition between one or more color “stops.”
The following code builds a linear gradient that shifts from solid black to
solid white and then back to black (
Figure 14.5
):
div {
[...]
/* for unsupported browsers */
background: #aaa;
/* for Firefox */
background: -moz-linear-gradient(top, #000, #fff, #000);
/* for Safari and Chrome */
background: -webkit-gradient(linear, left top, left
➥
bottom, from(#000), to(#000), color-stop(0.5,#fff));
/* W3C specs */
background: linear-gradient(left top, #000, #fff, #000);
}
The direction (or angle) of the gradient can be controlled, as can the
distance it takes to transition colors.
