HTML and CSS Reference
In-Depth Information
image is located up one level in the folder structure (represented by “
..
”) and inside a folder
called “images” (represented by “
/images
”).
This background image file is a GIF file that has an original size of 129px by 129px. So how
does such a small image fill the background? This brings us to the next background-related
property in our rule set.
The
background-repeat
property is used to define whether we want the background to
appear only once, or if we want it to repeat vertically, horizontally, or both. For the
<body>
element, we want the background to repeat throughout the entire
<body>
, so we set the
value to
repeat repeat
. Alternatively, we could write
repeat
just once, which would
have the same result, because it would assume the missing second value is the same as the
first. I've included both values explicitly to demonstrate that you can have two different val-
ues defined. The first value represents horizontal repeat, and the second value represents ver-
tical.
Other commonly used values for background repeat are
no-repeat
(meaning we don't
want it to repeat),
repeat-x
(which repeats the image horizontally, or along the
x
axis,) and
repeat-y
(which repeats the image vertically, or along the
y
axis). When using the
x
and
y
repeat values, you only need to define one, as the other is assumed to be
no-repeat
.
Finally, the last line in the code uses the
background-position
property. This will ac-
cept any pair of unit values, separated by a space. You can use pixels, ems, percentages, and
more—we'll discuss values and units in more detail later in this chapter. This property tells
the browser where to position the background image. In our example, we haven't needed to
define this value (the default is "
0 0
", which is what we're using), but it's been included for
reference, as it's a property you'll employ often.
The
background-position
property will work only if you're using
no-repeat
on at
least one of the directions (horizontal or vertical) in the
background-repeat
property.
The background position tells the browser where to place the background when it starts to
repeat, relative to the element on which the background is applied. For example, a non-re-
peating background with a background-position property set to “
30px 40px
” will position
the background 30 pixels from the left and 40 pixels from the top of the element on which it's
applied. You also have the option to use keywords like
top
,
left
,
center
,
right
, and
bottom
.
