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 the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial