Setting Backgrounds & Gradients - Learn to Code HTML and CSS: Develop and Style Websites - page 148

12. line-height: 33px;
13. }

The interior pages of our Styles Conference website have now received some long-
overdue love in the form of gradient background rows and leads (see Figure
7.10 ) . Make sure to review the code for all of the interior pages to see their newly
enhanced content, headings, and paragraphs.

Figure 7.10 The Speakers page of our Styles Conference website, complete with a
gradient background row

The source code for the exercises within this lesson can be found at ht-

tp://learn.shayhowe.com/html-css/setting-backgrounds-and-gradients/ .

Using Multiple Background Images
For the longest time, elements were allowed to have only one background image at a time,
which created quite a few constraints when designing a page. Fortunately, with CSS3, we
can now use more than one background image on an element by comma-separating mul-
tiple background values within a background or background-image property.
The background image value that comes first will be the foremost background image, and
the background image that's listed last will be the rearmost background image. Any value
between the first and the last will reside within the middle ground accordingly. Here's an
example of the CSS for a <div> element that uses three background images: