Saturday, February 15, 2025

Editing Background Properties with HTML Style Sheets

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.

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Popular Articles

Featured