Working with color and backgrounds

The color attribute

To set up the foreground color use one of the styles shown in the following examples:

The percentages in the last example are taken of the value 255.

Example (styling the <i> tag):

Similarly, the background color can be set by using the following style:

Example (styling the <blockquote> tag):

This is a text with a white background

Working with background images

Almost any element on the page can also be displayed with its background image. The background image has four attributes that specify the source of the image file, tiling of the image, placement of the image, and scrolling of the image. The examples below with refer to the following background image back11.gif:

The image source

To specify the background image URL, use the style

In our case it is

Tiling of the image

To specify the image tiling, use the style

where tiling can take on four values specified in the table below. Clicking on a button opens a small pop-up window with the corresponding tiling of the background image.

Placement of the image

To specify the image placement, use the style

where x and y is the top left corner of the image position. Starting with this position the background image will be tiled (if requested). The values of x and y can be percentages (of the current window width and height, absolute values (e.g. in inches), or keywords. The available keywords for the x-position are top, center, and bottom. The ones for the y-position are left, center, and right.

In the following example you can experiment with the background image positioning by entering the parameters into the input field. Clicking of the button opens a window with a single image positioned as specified in the input field. Clicking on the "tiling" button adds the tiling.

Note that Netscape prior to version 6.0 does not support the background-position attribute.

Scrolling of the background

By default the background images are moved along with the the background of the page as the user scrolls the Web page. You can change this with the background-attachment attribute. The syntax of this style is:

where the values of attach are either scroll (default) or fixed, which places the image in a fixed place, preventing it from moving even if the user scrolled down through the Web page.

Try how it works:

Note that Netscape prior to version 6.0 does not support the background-attachment attribute.

The background attribute

One can combine all the above attributes in one background attribute. The syntax for the background attribute is:

Example:

You do not need to specify all the attributes, but those that you specify must follow the above order. Otherwise, the results might be unpredictable.