Web Development Tutorials


Background Images

Any HTML container, from the <body> tag down through the <span> tag, can use graphic images as backgrounds behind their text content. Of course, you need to be judicious in selecting images that do not overpower or detract from the text communication intended by the page.

Image Sources

Texture image.

Figure 5-16. Texture image.

Most background images are textures rather than pictures. Pictures tend to be too "busy" and distract attention from the message. These textures are either standard GIF or JPEG images; plus, the images are usually not the full size of the container for which they provide the background. Textures are small, specially designed images that can be repeated across and down a page and fit together seamlessly to form a smooth backdrop.

The accompanying graphic is typical of an image used as a background for page elements. It displays a texture that fits together side by side when the image is repeated horizontally and vertically across and down the background area of the page element. Repeatable textures such as this are sometimes difficult to make, but there are plenty to choose from at most Web clip-art sites.

Background Styles

There are four style properties pertinent to displaying background images behind text containers. These styles, shown in Figure 5-17, select an image, repeat an image, position an image, and affix an image for text over-scrolling. Not all properties are required for all background images.

Property: Value
background-attachment Sets how a background image is attached to a document, whether or not the image scrolls with the text.
background-image Sets the background image of page element specified as
background-position Sets the location of the top-left corner of the background image relative to the top-left corner of the container element, using a measurement, a percentage, or a keyword or pair of keywords.
left top
left% top%
top left|top center|top right
center left|center center|center right
bottom left|bottom center|bottom right
background-repeat Sets whether background image repeats horizontally, vertically, in both directions, or not at all.

Figure 5-17. Background style properties.

A background image is specified with the background-image:url(url) property, where the location of the image file is given by its url address. If the image file is stored in the same location as the page, only the file name need be coded. If no other style settings are made pertaining to the background image, it is repeated horizontally and vertically, and across and down the container to fill the background with the image.

The page shown in Figure 5-21 uses the background-image property to fill the page horizontally and vertically with a texture. No other style properties are required.

      body {background-image:url(Background.jpg)}
Page with background image.

Figure 5-18. Page with texture image used as background.

The Background.jpg image has an actual size of 144 x 144 pixels, or 2" square. With no additional style properties given, the image is automatically repeated across and down the page the fill to available space.

Of course, it is not necessary to use repeatable textures as background images. You can make use of any GIF or JPEG image. You need to be cautious when using regular images as backgrounds since they may have colors that are too intense and make the overlaying text difficult to read. If you have photo editing software available you can reduce the opacity, or transparency, of the image to temper its intensity for use as a "watermark" image. This is done for the image shown in Figure 5-19.

      body {background-image:url(Stonehenge.jpg)}
Heading Background image with transparency.

Figure 5-19. Page with repeated background image with reduced opacity.

As in the case of the previous background texture, the image repeats both horizontally and vertically to fill the page. This repeating pattern is more noticeable when using a regular graphic image.

You can cause one or more background image to appear by coding the background-repeat property. The value repeat-x repeats the image horizontally for as many times as needed to fill the container from left to right thereby producing a single row of images; repeat-y repeats the image vertically for as many times as needed to fill the container from top to bottom subsequrntly producing a single column of images; repeat repeats the image in both directions to completely fill the container (the default value); and no-repeat produces a single image in the top-left corner of the container.

If an image is not repeated, you can indicate the location of the single image inside the container by coding the background-position property. The following code positions an image in the center of the page with background-position:320px 150px. Browser output is shown in Figure 5-20.

      body {background-image:url(Stonehenge.jpg); background-repeat:no-repeat;
            background-position:320px 150px}
Heading Page with single background image.

Figure 5-20. Page with single background image positioned at exact pixel location.

The two pixel measurements--320px 150px--give the distance from the left and top of the page to the left and top of the image. In other words, the left edge of the picture is 320 pixels from the left edge of the page, and the top edge of the picture is 150 pixels from the top edge of the page. You may have to try several measurements before you get an image positioned to your satisfaction.

In addition to specifying exact pixel locations for a background image, you can specify certain percentages of page width and page height for placement of the image. Also, various keywords or pairs of keywords can be used to position the image. The keyword top, right, bottom, left, or center positions the image, respectively, at the top-center, right-center, bottom-center, and center of the page. The keyword pairs top left, top center, top right, center left, center center, center right, bottom left, bottom center, or bottom right position the image at these named locations on the page.

It is important to remember that these positions are relative to the full size of the Web page, not to the size of the browser window. Thus, an image positioned at the center or at the bottom of a page may not be visible until the page is scrolled to bring the image into view.

In the above examples, the background image is scrolled when the text on the page is scrolled. For certain types of backgrounds, you may want the image to remain "fixed" so that text scrolls over the fixed background. This effect is accomplished with the background-attachment property. Its default value is scroll. Changing it to fixed keeps the background image in the same position while the text foreground scrolls over the top. This effect is shown in Figure 5-24.

      body {background-image:url(Stonehenge.jpg); background-repeat:no-repeat;
            background-position:320px 150px; background-attachment:fixed}
Heading Page with fixed, scrollable background image.

Figure 5-21. Page with fixed background image over which page content scrolls.

The previous examples show background images for an entire Web page; however, any container tag can have a background image. Figure 5-22 shows a paragraph with a background texture.

    p#BKGND {background-image:url(Background.jpg); margin:20px; font-family:
            verdana; font-size:12pt; font-weight:bold; text-align:justify}

    <h1>Paragraph Background Texture</h1>

    <p id="BKGND">This is a paragraph with a background texture. The default
    background-image property repeats the background pattern horizontally
    and vertically to fill the area of the paragraph.</p>
    Paragraph with background image
Heading Page with fixed, scrollable background image.

Figure 5-22. Paragraph with background texture.

Background Settings

The following interactive displays show the results of various background settings.

Dynamic background-attachment Style Settings

Dynamic background-attachment Style Settings

div style="background-image:url(Stonehenge.jpg);"
font-weight:bold; width:500px; height:200px;

scroll fixed

Click the above "fixed" button to change the background of the above division to a fixed background; then scroll the division to see the effect. You can have a fixed background image even when textures are used.

Dynamic background-repeat Style Settings

<div style="background-image:url(Stonehenge.jpg);"
font-weight:bold; width:500px; height:200px;"


no-repeat repeat-x repeat-y repeat

Click the above buttons to see the results of applying different background-repeat values to the division.

Dynamic background-position Style Settings

<div style="background-image:url(Stonehenge.jpg);"
font-weight:bold; width:500px; height:200px;


top right bottom left center
top left    top center    top right
center left center center center right
bottom left bottom center bottom right

Click the above buttons to see the results of applying different background-position values to the division.

TOP | NEXT: Image Transparency