Getting Fancy - Jump Start CSS - page 145

}
.box-2 {
background-image: linear-gradient(to left, #87053e,
#560329);
}
.box-3 {
background-image: linear-gradient(to right, #87053e,
#560329);
}
.box-4 {
background-image: linear-gradient(33deg, #87053e,
#560329);
}
If we leave out the direction (like we're doing on the RecipeFinder header), then the default
is to bottom , which we can also define explicitly. The final example shown in the pre-
vious code block uses an angle unit of 33 degrees to define the direction. This can also be a
negative value. A value of 180deg would be equivalent to to bottom or leaving out the
direction altogether.
Adding Multiple Gradients on a Single Element
Earlier in the topic we dealt with adding backgrounds to elements using the background-
image property. In this chapter, we've seen that gradients can be added as backgrounds us-
ing a special function that works as a value for the background-image property. But what if
you want to have more than one background on a single element?
We can have multiple background images (and therefore multiple gradients) on a single ele-
ment by comma-separating backgrounds using either the background shorthand property,
or the background-image property. Here are two examples:
.example {
background: url(bg-1.png) no-repeat top left,
url(bg-2.png) repeat-x top left;