HTML and CSS Reference
In-Depth Information
where
url
defi nes the name and location of the background image fi le. Background
images can be added to almost any page element. For example, the style rule
body {
background-image: url(cyclist.png);
}
displays the image fi le
cyclist.png
in the background of the Web page body.
Background Image Options
When a browser loads a background image, it repeats the image in both the vertical and
horizontal directions until the entire background is fi lled. This process is known as
tiling
because of its similarity to the process of fi lling up a fl oor or other surface with tiles. You
can specify the direction of tiling using the style
background-repeat:
type
;
where
type
is
repeat
(the default),
repeat-x
,
repeat-y
,
no-repeat
,
round
, or
space
.
Figure 4-6 describes each of the repeat types. At the time of this writing, the
round
and
space
options are not well supported by current browsers.
Figure 4-6
background-repeat property
background-repeat: repeat;
image is tiled both
horizontally and vertically
background-repeat: repeat-x;
image is tiled horizontally
background-repeat: repeat-y;
image is tiled vertically
background-repeat: no-repeat;
image is not tiled
background-repeat: round;
background image is tiled and
resized to fit in the container a
whole number of times
background-repeat: space;
background image is
tiled and spaces added to fit
in the container a whole
number of times
