Advanced Use of the Body Tag
- Most people begin their journey into the <BODY> tag by
playing with backgrounds. The BACKGROUND attribute allows you to
define an image that will be tiled to fill the entire browser window
underneath the body content. [1]
- For example, look at this hideous example in which we take the
afraid_icon image from previous examples and add it to the background
of a web page with the following HTML:
<HTML>
<HEAD>
<TITLE>Yucky Background</TITLE>
<BODY BACKGROUND = "http://www.eff.org/afraid_icon.gif">
<H2>Here is some text which is placed above
a tiled image background. Obviously, this is not
the best image to use since it draws attention
away from the content.</H2>
</BODY>
</HTML>
- Notice that the BACKGROUND attribute simply takes an image location
as the SRC
attribute of the <IMG> tag did. As always, you can
either use a relative or absolute link.
- The figure below shows the result of the previous code in a web
browser.
- Notice how dangerous it can be to use backgrounds.
- First, like any image, background images take some time to load.
- Second, if you do not choose the image right, you can easily render
your text illegible.
- Third, notice that the background image will be tiled so that it
will fill up the available space. Since you cannot control the height
and width of the browser window opened by your client, it is very hard
to control exactly what your background will look like.
- One thing that can help solve some of these problems is to use some
of the backgrounds already created for use on the web. You can find
background libraries at the
Yahoo
Background Library which tile seamlessly, utilize safe, stylish
patterns, and are small enough to not hinder download time. Of course,
many of the libraries also have some terrible, psychedelic patterns as
well, so choose carefully.
- Below is a web page with a more reasonable background texture.
- As we said above, since backgrounds tile automatically, it is
unusual to design a background out of a single no-tiling image.
You cannot control browser width and height. Thus if you design your
single background for a large monitor, parts of the background will be
clipped on smaller monitors whereas if you design your background for
a small monitor it will be tiled on larger ones.
- One exception to that rule is the use of side bars. A side bar is
a single image that tiles vertically but does not "appear" to tile
horizontally.
- In a side bar, you create a short but extremely wide line with a
color block filling a small margin at the left-hand border. Since the
image will tile, the color block will be expanded vertically, but if
you choose a width such as 1600 pixels, it is unlikely that a browser
will be opened wide enough to tile horizontally.
- The following images show a side bar image and the resulting web
page (Note: We have put a black border around the side bar so that you
can see it against the white background)....
Related Resources
Advanced Use of the Body Tag
Introduction to Web Design | Table of Contents
Exercise Seven
|
