Head First HTML with CSS

ackground images
Adding a background image
You’re almost there. What’s left? We still need to get the white “guarantee star”
graphic into the paragraph and work on the border, which is a solid, black line.
Let’s tackle the image first.
If you look in the “chapter10/lounge/images” folder, you’ll find a GIF image called
“background.gif ” that looks like this:
Now, you just need to get that image into your paragraph element, so you’ll be
using an element, right? Not so fast. If you’re adding an image to the
background of an element, there is another way. Using CSS, you can add a
background image to any element using the background-image property.
Let’s give it a try and see how it works:
.guarantee {
line-height: 1.9em;
font-style: italic;
font-family: Georgia, “Times New Roman”, Times, serif;
color: #444444;
border-color: black;
border-width: 1px;
border-style: solid;
background-color: #a7cece;
padding: 25px;
margin: 30px;
background-image: url(images/background.gif);
}
404 Chapter 10
This image is a simple star-like
pattern in white against a
transparent background. Notice
that it also has a matte around
it that matches the color of
the background.
Here are the properties you added
in the exercise on the previous page.
Add this to your CSS, save, and reload your page.