Chapter 6. Adding Background Images

In this lesson, you will learn how to apply a background image to the <body> element. You will also learn how to apply the background-repeat and background-position properties. The aim is to create a gradient image that repeats down the right edge of the page.

Setting Up the HTML Code

The HTML code for this lesson will be comprised of three paragraphs of text as shown in Listing 6.1.

Example 6.1. HTML Code Containing the Markup for Lesson 6

<p>
    Lorem I
psum dolor sit amet...
</p>
<p>
    Ut wisi enim ad minim veniam...
</p>
<p>
    Duis autem vel eum iriure dolor...
</p>

Creating Selectors to Style the Header

To style the <body> element and its content, you will only need a single type selector as shown in Listing 6.2.

Get Sams Teach Yourself CSS in 10 Minutes now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.