HTML, XHTML, and CSS, Sixth Edition

Changing the Text's Background

The background refers not to the background of the entire page, but to the background of the specified element. In other words, you can change the background of just a few paragraphs or words, by setting the background of those words to a different color.

Figure 10.25. It's a good idea to set the background color for every element that you've set a foreground color for. Setting the background color of the body element, covers the background of all of its child elements.

To change the text's background:

1.

Type background:.

2.

Type transparent or color, where color is a color name or hex color (see page 160).

3.

If desired, type url(image.gif), to use an image for the background.

If desired, type repeat to tile the image both horizontally and vertically, repeat-x to tile the image only horizontally, repeat-y to tile the image only vertically, and no-repeat to not tile the image.

Figure 10.26. The background of the body element is light blue. The background of the table of contents is light purple.

If desired, type fixed or scroll to determine whether the background should scroll along with the canvas.

If desired, type x y to set the position of the background image, where x and y can be expressed as a percentage or an absolute distance from the top-left corner. Or use values of left, center, and right for x and top, center, or bottom for y.

Tips

  • You can specify both a color and an image's URL for the background. The color will be used until the image is loadedor if it can't be loaded for any reasonand will be seen through any transparent portions of the image.

  • Create enough contrast between the background and the foreground so that your visitors can actually read the text.

  • The background property is not inherited.

Related

Категории