from Special Edition Using HTML 4:
Cascading Style Sheet Property Reference
by Jerry Honeycutt
Background Properties
HTML style sheets provide you the capability to decorate the background of an
element by using color and images. Note that using the properties described in the
following sections doesn’t define the background for the Web page as a whole. These
properties set the background of an element on the Web page. For example, if you
define a background for the <UL> tag, as in the following example,
then the background only appears within each occurrence of that tag on the Web page.
UL {background-image: URL(http://www.myserver.com/images/watermark.gif)}
You can group the background properties described in the following sections using
background. You specify the background color, image, repeat, attachment,
and position like this:
background: white URL(http://www.myserver.com/images/bg.gif) repeat-x fixed top, left
background-attachment
The background-attachment property determines whether the background
image is fixed in the browser window or scrolls as the user scrolls the window. You
can use this property to create a watermark behind your Web page that stays put regardless
of which portion of the Web page the user is viewing.
You can assign two possible values to background-attachment, as described
in Table B.1.
Table B.1 background-attachment Values
Value | Description |
fixed | The image is fixed within the browser window. |
scroll | The image scrolls as the user scrolls the window. |
background-color
You can change the background color for an element by using the background-color
property. You can assign one of the valid color names to background-color
or an RGB value such as #808080 (white). For example, if you define a style
for the <UL> tag that changes the background color to blue, then all
the unordered lists in your HTML file will be displayed with a blue background.
TIP: Changing the background color for certain types of tags is
useful to highlight information on the Web page.
background-image
You can display a background image in an element by setting the value of the background-image
property to the URL of an image. This has the effect of a watermark displayed behind
that element on the Web page (the element’s content is displayed over the background
image).
You set the URL by using the URL(address) format, like this:
H1 {background-image: URL(http://www.myserver.com/images/heading.gif)}
Units in CSS1
Most style sheet properties accept some sort of length. You can use many different
units to specify a length, too. HTML supports two types of units: relative and absolute
lengths. The following table describes the relative units.
Unit | Example | Description |
em | 0.5em | The height of the element’s font, relative to the output device |
ex | 0.75ex | The height of the letter X, relative to the output device |
px | 15px | Pixels, relative to the output device |
Whenever possible, use relative units so that your Web pages will scale better from
one device to the next. You can also use the absolute units as described in the following
table.
Unit | Example | Description |
in | .5in | Inches |
cm | 1cm | Centimeters |
mm | 20mm | Millimeters |
pt | 12pt | Points (1pt = 1/72 inch) |
pc | 1pc | Pica (1pc = 12pt) |
Aside from relative and absolute lengths, you can also specify most lengths in terms
of percentages. With HTML style sheets, percentages are almost always relative to
the parent element. For example, if you’re specifying a font size of 50 percent,
what you’re really saying is that you want the element’s font size to be half as
big as the parent element’s font size.
background-position
You change the position of the background image by using the background-position
property. The position is always relative to the top-left corner of the element in
which you’re positioning the image. That is, if you’re positioning an image for the
<UL> tag, the image’s position will be relative to the top-left corner
of the unordered list.
The background-position property looks like
background-position: x y
where x is the horizontal position, and y is the
vertical position of the image. x and y can be a
percentage, which is relative to the size of the element; a fixed amount such as
1in (one inch); or one of the keywords that indicate a relative position
as described in Table B.4. For example:
background-position: center 20
Table B.2 background-position Positions
Keyword | Description |
top | Aligns the image with the top of the containing element; only useful when substituted for y. |
left | Aligns the image with the left side of the containing element; only useful when substituted for x. |
right | Aligns the image with the right side of the containing element; only useful when substituted for y. |
bottom | Aligns the image with the bottom of the containing element; only useful when substituted for y. |
center | Centers the image within the containing element; when substituted for x, the image is centered horizontally; when substituted for y, the image is centered vertically. |
background-repeat
You can cause the user’s browser to tile the background image so that it fills
the entire area of the containing element. The background-repeat property
can have four values, as described in Table B.3.
Table B.3 background-repeat Values
Value | Description |
repeat | Repeats the image both vertically and horizontally |
repeat-x | Repeats the image horizontally |
repeat-y | Repeats the image vertically |
no-repeat | Doesn’t repeat the image |
color
The color property determines the foreground color for the element. Thus,
the browser displays the element’s text using this color. You can set color
to a named color or an RGB value. Named colors include those in the following list:
black | silver | gray | white |
maroon | red | purple | fuchsia |
green | lime | olive | yellow |
navy | blue | teal | aqua |
© Copyright Macmillan Computer Publishing. All
rights reserved.