HTML and CSS Reference
In-Depth Information
■
When adding a background image, you should always specify a background color to preserve contrast with
the text if the image cannot be loaded for any reason.
Tip
When you add a background image to an element, by default, the browser places the image at the top left
of the element and automatically tiles (repeats) the image both horizontally and vertically to fit all available
background space. This can be useful for adding a background texture to the page. The rule for the
<body>
in
tiling.html looks like this:
body {
background-image: url(images/bg_tile.jpg);
background-color: #D2E1E6;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
color: #000;
}
The image, bg_tile.jpg is
50px
square, but as Figure
8-3
shows, it fills the entire page.
Figure 8-3.
A seamless tile can provide an interesting background texture for a page
The background image is only 523 bytes, so it adds virtually nothing to the overall size of the page.
■
The image hasn't been stretched by the browser. i created the seamless edges for the tile in Photoshop using
the offset filter, setting the horizontal and vertical values to half the width and height, and selecting
Wrap Around
.
i then cleaned up the inner sections with the Clone stamp Tool. There's also a wide choice of online pattern generators
Tip
