• Choose a category
• All
• Classic-Fiction

Using Background Images

The heading uses a lighter version of the background,

and the paragraph uses a solid color background.

The heading uses a lighter version of the background,

and the paragraph uses a solid color background.

The heading uses a lighter version of the background,

and the paragraph uses a solid color background.

Attaching the background image to an element through CSS isn’t difficult. Here are the general steps:

1. Find or create an appropriate image and place it in the same directory as the page so it’s easy to find.

2. Attach the background-image style rule to the page you want to apply the image to.

If you want to apply the image to the entire page, use the body element.

3. Tell CSS where background-image is by adding a url identifier.

Use the keyword url() to indicate that the next thing is an address.

4. Enter the address of the image.

It’s easiest if the image is in the same directory as the page. If that’s the case, you can simply type the image name. Make sure you surround the URL with quotes.

5. Test your background image by viewing the Web page in your browser.

A lot can go wrong with background images. The image may not be in the right directory, you might have misspelled its name, or you may have forgotten the url() bit. (I do all those things sometimes.)

Getting a background check

It’s pretty easy to add backgrounds, but background images aren’t perfect. Figure 4-9 demonstrates a page with a nice background. Unfortunately, the text is difficult to read.

Background images can add a lot of zing to your pages, but they can introduce some problems, such as:

♦ Background images can add to the file size. Images are very large, so a big background image can make your page much larger and harder to download.

♦ Some images can make your page harder to read. An image in the background can interfere with the text, so the page can be much harder to read.

♦ Good images don’t make good backgrounds. A good picture draws the eye and calls attention to it. The job of a background image is to fade into the background. If you want people to look at a picture, embed it. Background images shouldn’t jump into the foreground.

♦ Backgrounds need to be low contrast. If your background image is dark, you can make light text viewable. If the background image is light, dark text shows up. If your image has areas of light and dark (like nearly all good images), it’ll be impossible to find a text color that looks good against it.

Solutions to the background conundrum

Web developers have come up with a number of solutions to background image issues over the years. I used several of these solutions in the backgroundImage.html page (the readable one shown in Figure 4-8).

Using a tiled image

If you try to create an image the size of an entire Web page, the image will be so large that dialup users will almost never see it. Even with compression techniques, a page-sized image is too large for quick or convenient loading.

Figure 4-9: The text is very hard to read. Don’t do this to your users!

Fortunately, you can use a much smaller image and fool the user into thinking it takes up the entire screen. Figure 4-10 shows the ropeBG.jpg that I used to cover the entire page.

Figure 4-10: The image is only 500 x 500 pixels.

Image courtesy of Julian Burgess (Creative Commons License)

I used a specially created image for the background. Even though it’s only 500 pixels wide by 500 pixels tall, it’s been carefully designed to repeat so you can’t see the seams. If you look carefully, you can tell that the image repeats, but you can’t tell exactly where one copy ends and the next one begins.

This type of image is a tiled background or sometimes a seamless texture.

Getting a tiled image

If you want an image that repeats seamlessly, you have two main options:

♦ Find an image online. A number of sites online have free seamless backgrounds for you to use on your site. Try a search and see