• Choose a category
• All
• Classic-Fiction

♦ Make your own image. If you can’t find a pre-made image that does what you want, you can always make your own. All the main image editing tools have seamless background tools. In GIMP, choose Filters⇒Map⇒Make Seamless. Check Book VIII, Chapter 4 for a technique to build your own tiled backgrounds in GIMP.

By default, a background image repeats as many times as necessary in both the horizontal and vertical dimensions to fill up the entire page. This fills the entire page with your background, but you only have to download a small image.

Setting background colors

Background colors can be a great tool for improving readability. If you set the background color of a specific element, that background color will appear on top of the underlying element’s background image. For the backgroundImage.html example, I set the background color of all p objects to white, so the text will appear on white regardless of the complex background. This is a useful technique for body text (like

tags) because text tends to be smaller and readability is especially important. If you want, you can set a background color that’s similar to the background image. Just be sure the foreground color contrasts with the background color so the text is easy to read.

When you use a dark background image with light text, be sure to also set the background-color to a dark color. This way the text is readable. Images take longer to load than colors and may be broken. Make sure the user can read the text immediately.

Reducing the contrast

In backgroundImage.html, the heading text is pretty dark, which won’t show up well against the dark background image. I used a different trick for the h1 heading. The heading uses a different version of the ropes image; this one is adjusted to be much brighter. The image is shown in Figure 4-11.

Figure 4-11: This is the ropes image with the brightness turned way up.

With this element, I kept the ropes image, but I made a much brighter background so the dark text would show up well underneath. This technique allows you to use the background image even underneath text, but here are a few things to keep in mind if you use it:

♦ Make the image very dark or very light. Use the Adjust Colors command in IrfanView or your favorite image editor to make your image dark or light. Don’t be shy. If you’re creating a lighter version, make it very light. (See Book I, Chapter 6 for details on color manipulation in IrfanView and Book VIII, Chapter 4 for how to change colors in GIMP.)

♦ Set the foreground to a color that contrasts with the background. If you have a very light version of the background image, you can use dark text on it. A dark background will require light text. Adjust the text color with your CSS code.

♦ Set a background color. Make the background color representative of the image. Background images can take some time to appear, but the background color appears immediately because it is defined in CSS. This is especially important for light text because white text on the default white background is invisible. After the background image appears, it overrides the background color. Be sure the text color contrasts with the background, whether that background is an image or a solid color.

♦ Use this trick for large text. Headlines are usually larger than body text, and they can be easier to read, even if they have a background behind them. Try to avoid putting background images behind smaller body text. This can make the text much harder to read.

Manipulating Background Images

After you place your background image, you might not be completely pleased with the way it appears. Don’t worry. You still have some control. You can specify how the image repeats and how it’s positioned.

Turning off the repeat

Background images repeat both horizontally and vertically by default. You may not want a background image to repeat, though. Figure 4-12 is a page with the ropes image set to not repeat at all.

Figure 4-12: The background doesn’t repeat at all.

The code uses