Background images are applied and controlled
using a variety of CSS properties, and they are commonly used
to add subtle textures and coloration to Web pages and their elements.
They are often applied to the <body> element, but they
may be applied to any block-level element. Since backgrounds are easiest
to understand when applied to the entire page, this sample document actually
links to several slightly different (and very simple) samples.
Backgrounds are typically composed of images whose dimensions are far smaller than the area that needs to be filled. To use images big enough to fill the area would require file sizes too big to be practical, and to stretch the image to the desired dimensions would produce unacceptable degradation in image quality. Therefore, browsers solve this problem much like you might handle tiling a shower wall. Rather than try to find one giant tile that precisely fills the whole wall, or stretching a smaller tile to fit, you buy a bunch of identical small tiles and arrange them in nice, neat rows and columns to completely cover the wall. The browser does the same thing, tiling identical copies of a single small image in nice, neat rows and columns until the whole area is filled.
For this reason, you want to choose your background images carefully so that they tile seamlessly when placed side-by-side and one-above-the-other. For example, the consider the following image:
The image above will not tile well, since when it placed adjacent to a copy of itself, the edges (or seams) are easily spotted. The top and right edges are predominantly brown, the left edge is predominantly green, and the bottom edge is predominantly black. To see what a mess this looks like on a page, try the following link:
Obviously, we need an image that will tile a bit more seamlessly. Let’s try the following:
Note how the incomplete droplets on the left edge match up with incomplete droplets on the right edge. Likewise, incomplete droplets along the top edge match up with incomplete droplets along the bottom edge. That should make the seams between adjacent images virtually invisible. For a page that uses this as its background image, try the following link:
Much better! However, there is an important problem with both of the previous examples. Look closely at the text on the page and notice how hard it would be to find a color that is easy to read everywhere against the background. The lily image ranges widely from very light areas to very dark areas. So any light text color blends in with the lighter areas, while any dark text color blends in with the darker areas. The droplet image has a smaller percentage of dark areas, but they still make it hard to read darker text against this background. And lighter text colors blend in to the lighter majority of the droplet image. In both cases, we needed to resort to a solid background color for the paragraph to get uniformly readable text. And, of course, the solid background color pretty much ruins the effect.
So let’s consider an image that is a bit more homogeneous:
It will still tile relatively seamlessly, but the degree of contrast between its lightest and darkest areas is significantly less than in the previous two images. This should make it much easier to find a text color that remains uniformly readable when placed against this background. Follow this link to see an example:
Since the tile’s predominant tone is toward the middle of the range of colors, both very dark and very light text colors work reasonably well.
If we don’t specify otherwise, the browser tiles the background image into as many rows and columns as are necessary to fill the required space, as demonstrated in the previous examples. However, we can use CSS to specify other options.
For example, we might ask for the image to be tiled only in the x-direction (horizontally) across the top of the area to be filled:
Or perhaps we’d prefer to have the image tiled only in the y-direction (vertically) down the left edge of the area to be filled:
Or even not tiled at all, so the background image appears only once:
If we don’t specify otherwise, the browser positions the first (or only) tile in the upper lefthand corner of the area to be filled, as demonstrated in the previous examples. However, we can use CSS to specify other starting positions.
If we wanted the background image to tile down the righthand edge of the area, we could position the starting tile in the upper right corner of the area:
Or, we could have the background image tile across the bottom of the page:
We can even have the background image appear once in the center of the page:
There is much more that can be done to control the background images on your page, but this sample was meant to give you a taste of the more common techniques.