Craig Zacker - Author, Editor, Networker

10 Minute Guide to HTML Style Sheets

10 Minute Guide to
HTML Style Sheets

by Craig Zacker

Published in February 1997 by Que Corporation

Previous Table of Contents Next


LESSON 16
Using Background Graphics

In this lesson, you learn how to create backgrounds for your web pages using graphic files in new and exciting ways.

In the last lesson, you saw how the traditional HTML technique of assigning a background color to your web pages has been enhanced by the use of styles to assign backgrounds to individual elements. This lesson demonstrates how the other standard background technique, the use of external graphic files, has also been enhanced.

Typically, a graphic background is applied by referencing the URL of a small GIF or JPG file in the <BODY> tag, using the BACKGROUND= attribute. You can continue to use the standard method of assigning the background a color with a <BODY> attribute and also apply styles to other elements. The background property, as defined in the CSS1 standard, permits you to reference graphic files in the same way and to exercise far more control over them than you can with traditional HTML.

Specifying Background URLs

To specify the URL for a background graphic file, add a value to the background property that consists of the URL plus the file’s location, in parentheses, as follows:

BODY     {background: URL(pattern.gif}
BODY     {background: URL(/graphics/pattern.gif)}
BODY     {background: URL(http://www.mycorp.com/graphics/                    pattern.gif)}

Use the standard Internet http notation for the URL within the parentheses to provide either a complete or relative path to the desired file.

As with values specifying colors, a background graphic can be applied to any HTML element and is subject to the same behavior described in Lesson 15. By default, a graphic supplied for a background is tiled to fill the entire space occupied by the background, repeating a small graphic like that shown in Figure 16.1 to create a background pattern for a whole page.


Figure 16.1  By tiling the image, a tiny graphic file fills the entire browser screen very quickly.

The same technique used in Lesson 15 to create the look of a page on the browser screen can be used with a background graphic to create quite a different effect. To do this, modify your SAMEPL2.HTML file from Lesson 13 to appear as follows:

<HTML>
<HEAD>
<STYLE>
<!--
BODY     {font-size: 11pt;
           margin-left: 0in;
           background: black}

TD       {background: URL(\windows\Black Thatch.bmp)}

H2       {font-size: 24pt;
          font-family: Arial;
          text-align: center;
          color: red}

P        {font-family: Verdana;
          font-size: 14pt
          margin-left: .1in;
          margin-right: .1in;
          color: white}

.first   {margin-right: 50%;
          line-height: 16pt;
          text-align: right}

.second  {margin-left: 50%;
          line-height: 16pt;
          text-align: left}

.third   {margin-left: 25%;
          margin-right: 25%;
          line-height: 16pt;
          text-align: center}
-->
</STYLE>
</HEAD>
<BODY>
<CENTER>
<TABLE WIDTH=90% BORDER=none>
<TD>
<H2>HTML Style Sheets</H2>
<P CLASS=first>HTML style sheets are innovative primarily in
that they allow various different styles to be applied to web
pages by the author. Indeed, it could be said that all web
browsers already use a style to display text.</P>
<P CLASS=second>A style is simply a collection of text and
layout attributes that can be selectively applied to all or
part of a document. The idea of grouping them into a style
allows the author to easily apply the same collection of
attributes to many different parts of a document.</P>
<P CLASS=third>The HTML styles</SPAN> in Microsoft's Internet
Explorer 3.0 are based on a draft standard being developed by
the World Wide Web Consortium (W3C).</p>
</TD>
</TABLE>
</CENTER>
</BODY>
</HTML>


TIP:  Background Image Files The Black Thatch.bmp file used in the SAMPLE2.HTML code is one of the wallpaper bitmaps that ships with the Windows 95 and Windows NT 4.0 operating systems. It can be found in the Windows home directory if you selected the Desktop Wallpaper item in the Accessories group during the operating system installation.

Notice that the three paragraphs in the <BODY> section have been enclosed within a single-celled table that occupies 90% of the browser’s width. This creates a rectangle within the rectangle of the canvas, and by applying the background property to the <TD> element, the tiny graphic shown in Figure 16.1 is repeated to fill the page, as shown in Figure 16.2.


Figure 16.2  A background graphic applied to a table can create a background pattern without filling the entire screen.


Controlling Repetition

Although a background graphic is tiled by default, the background property permits you to control the way the image is repeated or can prevent any repetition at all. The tiling pattern of a standard background stretches along two axes, the x-axis that runs horizontally across the screen, and the y-axis that runs vertically. The repetitive behavior of a URL specified as a background is controlled by adding one of the following additional values to the background property:

  repeat (default) Causes the graphic image to be repeated along both axes
  no-repeat Prevents any repetition of the graphic image
  repeat-x Causes the graphic image to be repeated along the x-axis only (horizontally)
  repeat-y Causes the graphic image to be repeated along the y-axis only (vertically)

The ability to control the repetition of the image allows web pages to be designed with effects that are more easily scaleable to browsers running at different resolutions.

One fairly common effect is to use a background to simulate the look of an open notebook page on the desktop. By tiling an image, the spiral binding of the notebook is made to extend down the left side of the page. When done in the traditional way, the graphic file must extend over the entire width of the screen, even though the actual image is only on the far left side, in order to prevent it from repeating horizontally. Because readers run their browsers at different screen resolutions and different window sizes, it is difficult to accommodate them all with one graphic file.

With styles, you can use a graphic file containing only the image, such as that shown in Figure 16.3 and force it to repeat down the vertical axis on the left side of the page only. This way, the right side of the page can expand to any size and support both high and low resolution displays.


Figure 16.3  Simple images like this one repeat with greater control using styles.

To do this, you would change the rule for the <TD> tag in your SAMPLE2.HTML file to appear as follows:

TD          {background: URL(notebook.jpg) repeat-y white}

The result is the page shown in Figure 16.4. Notice how the tiled background is restricted to the confines of the table and how a color value (white, in this case) can be supplied along with the URL. You can also use any of the RGB formats discussed in Lesson 15 to specify the color that appears in the areas of the background that are not covered by the graphic image.


Figure 16.4  Repetition of a background image can be restricted to the horizontal or vertical axis.

Positioning Graphics

When you change the background property’s repetition behavior, as in the last example, you often create a situation in which the image does not occupy the entire space devoted to the background. When you use a single instance of an image on the page, or repeat it along one axis, you can add additional values to the background property that permit you to place the image in any location that you wish. Without additional values, the image is placed in the upper left corner of the background.

Image placement is controlled by two values representing the distance from the upper left corner along the x-axis (horizontal) and the y-axis (vertical). The distance can be expressed using percentages, keywords, or length measurements. Relative measurements are computed against the size of the background containing the image(s).

Location values should appear at the end of the background property declaration. A single value assigns the same distance to both axes. Two values express the horizontal and vertical distances, respectively.

For example, the following rule places a single instance of the graphic image 25% of the way in from the left margin and 50% of the way down the page from the top margin, as shown in Figure 16.5.

TD          {background: URL(notebook.jpg) no-repeat white                      25% 50%}


Figure 16.5  For the first time, style sheets enable you to locate a background graphic on a page with absolute precision.

You can also use keywords to specify the distances—the values are shown in the following table:

Horizontal (X-axis)

Keyword Distance

left 0%
center 50%
right 100%

Vertical (Y-axis)
Keyword Distance

top 0%
middle 50%
bottom 100%

You can also specify absolute distances using any of the standard measurement scales accepted by the CSS1 standard (inches, centimeters, points, ems, and pixels).


Explorer Support Internet Explorer 3.0 does not support the use of absolute measurements in the placement of background graphics. Percentages and keywords, however, are supported.

Scrolling Graphics

Another feature of the background property is the ability to control whether an image scrolls with the text in the foreground (which is the default), or remains fixed on the screen while the text scrolls over it. With this feature, you can place a single logo or other image in the center of a web page and have it remain stationary as readers scroll through the contents of the documents.

To stop a background from scrolling, add the fixed keyword to the background declaration anywhere after the URL specification. The scroll keyword triggers the opposite behavior.


TIP:  Image Scrolling The ability to fix an image to a specific spot is only available in relation to the overall canvas (that is, the entire area of the browser occupied by the document). The fixed keyword, therefore, is only effective when used in a background declaration applied to the <BODY> tag.

This watermark technique is a subtle but effective way of keeping the reader’s attention on a company name or trademark, without the need for the endless repetition of tiling.