|
Browsers can also display
images as a “background” on web pages, which the text
and other graphics will appear on top of.
This background image
will automatically be “tiled,” so if the image size
is smaller than the size of the screen display, the image will
automatically be repeated to fill up the page’s background
on the display.
Background images,
like background colors, are assigned in the <BODY> tag.
For example:
<BODY
BACKGROUND=“IMAGE2.GIF”>
will cause the image
named "Image2.gif" to tile automatically as a background
on your web page.
Let's try adding a
background to our web page. First, you'll need the image file.
Following the same procedure you did when you got the image of
the dog from the Images page, save the file below in the same
folder as your test.htm file:
(image2.gif)
Now
modify the <BODY> tag of your HTML code, which currently
looks like this:
<BODY BGCOLOR=#000000 TEXT=#00FF00 LINK=#FFFF00 VLINK=#FFFFFF
ALINK=#FFCC00>
to look like this instead:
(Note we've only replace thed "BGCOLOR" part)
<BODY
BACKGROUND="image2.gif" BGCOLOR=#000000 TEXT=#00FF00
LINK=#FFFF00 VLINK=#FFFFFF ALINK=#FFCC00>
And this is the result:
You can assign both
a BACKGROUND and a BGCOLOR to the same body tag. In this case,
the bgcolor you select will be visible to the end user until the
background file loads.
If you scroll the page
you just modified down to read the remaining lines not visible
when the page first loads, you'll note the background image scrolls
with it.
As an option, you can
make the background fixed in place, so that text and images over
the background scroll, but the background remains stationary.
You can do this by simply adding the additional parameter BGPROPERTIES="FIXED"
to the <BODY> tag.
EXAMPLE:
<BODY
BACKGROUND="image2.gif" BGCOLOR=#000000 TEXT=#00FF00
LINK=#FFFF00 VLINK=#FFFFFF ALINK=#FFCC00 BGPROPERTIES="FIXED">
However, it should
be noted that this will ONLY
work for viewers using Internet Explorer 4.0 or higher! Netscape
browsers and earlier versions of Internet Explorer do not
support fixed backgrounds!
The trickiest part
about using background images is making them look good without
interfering with the content of the page. Always test a background
on a page to see what text colors (if any) show up well
and are readable on it. If your page is difficult to read because
of color clashes, no one will want to look at it.
Up next, we'll be taking
a brief look at some special types of images you may want to put
on your web page.
|
