HTML and CSS Reference
In-Depth Information
Obviously, it doesn't make any sense adding multiple background images to an element if they tile
automatically to fill all available space. Because the first image appears on top, subsequent images would always
be hidden. However, you can control the default tiling behavior.
I'll come back to the subject of multiple background images later in this chapter after describing the other
background properties.
Controlling How Background Images Repeat
The property that controls the way background images are repeated is called
background-repeat
. I'll begin by
describing the CSS2.1 version because it works in all browsers, including IE 8 and earlier. Then I'll describe the
enhanced CSS3 features supported by more recent browsers.
Values that Work in All Browsers
he
background-repeat
property accepts the following values in all browsers:
repeat
This is the default value. It repeats the image both horizontally and vertically to
fill all available space.
repeat-x
This repeats the image horizontally only.
repeat-y
This repeats the image vertically only.
no-repeat
Display the image once only.
Setting the value of
background-repeat
to
repeat-x
tiles the background image across the horizontal axis
only. This can be useful for creating a gradient background. The background image needs to be only a thin slice.
For example, the background image in repeat-x.html is only
20px
wide. If you set the background color to the
same as the bottom of the image, it gives the appearance of a continuous color (see Figure
8-4
). The style rule for
the
<body>
in repeat-x.html looks like this:
body {
background-image: url(images/gradient.jpg);
background-repeat: repeat-x;
background-color: #C1FEFF;
color: #000;
font-family: Tahoma, Geneva, sans-serif;
}
