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
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.
fixed
scroll
|
| background-image |
Sets the background image of page element specified as
url(url)
none
|
| 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|right|bottom|left|center
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.
repeat-x
repeat-y
repeat
no-repeat
|
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.
<style>
body {background-image:url(Background.jpg)}
</style>
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.
<style>
body {background-image:url(Stonehenge.jpg)}
</style>
Heading
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.
<style>
body {background-image:url(Stonehenge.jpg); background-repeat:no-repeat;
background-position:320px 150px}
</style>
Heading
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.
<style>
body {background-image:url(Stonehenge.jpg); background-repeat:no-repeat;
background-position:320px 150px; background-attachment:fixed}
</style>
Heading
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.
<style>
p#BKGND {background-image:url(Background.jpg); margin:20px; font-family:
verdana; font-size:12pt; font-weight:bold; text-align:justify}
</style>
<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
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