HTML and CSS Reference
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-
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