HTML and CSS Reference
In-Depth Information
body {
background: #cab5a3 url(../images/bg-main.gif) repeat
repeat 0 0;
}
The first point to note in this example is the selector we're using:
body
. This tells the
browser that the declaration block will apply to the
<body>
element (which is the next ele-
ment down from the
<html>
element in our HTML hierarchy).
Next, you'll notice that we're using the
background
property, which is a shorthand prop-
number of different background-related properties using a single line of code. If we didn't use
shorthand, this single declaration would look like this:
body {
background-color: #cab5a3;
background-image: url(../images/bg-main.gif);
background-repeat: repeat repeat;
background-position: 0 0;
}
This would give us exactly the same result as the single-line version. You'll be using the
properties described here regularly in future projects, so let's discuss each of them in detail.
First, we've defined a background color for the
<body>
. This is good practice as it ensures
that the user will see something similar to the background image should it fail to load quickly
enough, or at all. Also, if the background image is dark, say, with light-colored text, this will
ensure readability. In this case, we're using a color value of
#cab5a3
—more on color val-
ues later in this chapter. This color was arrived at simply by sampling part of the textured
background in the Photoshop file, and then copying and pasting the color value from Pho-
toshop into my CSS file.
Next, we have the declaration that tells the browser what background image to use on the
<body>
element. The syntax uses the
url()
notation to reference the background image.
This is the syntax you'll use most often when including an image in a web page using CSS.
The path to the file needs to be relative to the location of the CSS file, which is why, in this
case, we're using “
../
” at the start of the path. This tells the browser that the background
