Web Development and Design Foundations with XHTML, 5th Edition

(^140) Chapter 4 Visual Elements and Graphics
Configuring Background Images with CSS
The default behavior of a browser is to repeat, or tile, background images to cover the
entire element’s background. Figures 4.18 and 4.19 display examples of this type of
tiling for a Web page background. This behavior also applies to other elements, such as
backgrounds for headings, paragraphs, and so on. You can change this tiling behavior
with the CSS background-repeatproperty. The background-repeatproperty has a
number of values: repeat(default), repeat-y(vertical repeat of background image),
repeat-x(horizontal repeat of background image), and no-repeat(background image
does not repeat). Figure 4.20 provides examples of the actual background image and
the result of applying various background-repeatproperty values.
You will explore configuring image backgrounds in the next Hands-On Practice.
Figure 4.20
Examples of the
CSS background-
repeatproperty
HANDS-ON PRACTICE 4.5
You will update the index.html file from the previous Hands-On Practice (shown in
Figure 4.17). In this Hands-On Practice you will configure the h2selector with a back-
ground image that does not repeat. Obtain the trilliumbullet.gif image from the student