HTML and CSS Reference
In-Depth Information
Listing 5-13.
A background image applied to the
body
element
body {
background-image: url(images/background.png);
}
The image tiles to fill the window on the rendered page, as you can see in Figure 5-19.
Figure 5-19.
The background image tiles in both directions, repeating as many times as necessary to fill the element's
area, the entire browser window in this case.
Relative URLs in CSS are relative to where the CSS file resides, not relative to where
the HTML document resides. Depending on how you organize your files on the server,
you may need to use up-level directives (
../
) in your CSS URLs, or use site-root-
relative URLs with leading slashes if your server is set up that way. If your background
image isn't showing up in the browser, check the file path in your image URL.
You can modify the default tiling with the
background-repeat
property, specifying whether the image
should repeat only horizontally, only vertically, or not at all. Listing 5-14 expands the previous CSS rule,
declaring that the background image should only repeat horizontally along the x-axis.
Listing 5-14.
Adding a
background-repeat
declaration
body {
background-image: url(images/background.gif);
background-repeat: repeat-x;
}
You can see in Figure 5-20 that the image now repeats across the top of the page but not downward.
