Using Background Images on Web Pages, and Resources
|
How to design them, create them, and use them.
And where to find them.
|
How To Create Them
Background images can be GIF or JPEG; PNG and other formats may (soon)
be options in some browsers. You can get ready-made background images
from many sources - see end of this page for a list. Even better,
create your own with a graphics program.
Keep the file size small; a few Kbytes should be enough.
Any larger and there is probably too much detail in your image for the
text to be readable.
Usually you want the image to tile seamlessly - i.e. the join
between tiles should not be discernable. Some graphics programs can
make seamless tiles.
To create a left-border effect, create a graphic about sixteen hundred
pixels wide and only a few pixels tall.
If the browser display window were somehow widened past sixteen hundred
pixels, the background image would tile horizontally as well,
but not too many users will stretch their windows that far
(and most monitors are not that wide).
How To Use Them
The
BODY tag
has a BACKGROUND attribute to specify
the
URL
of an image that is to be used as a background for the document.
<BODY Background =
"/Authoring/Graphics/Images/bluesq.gif"
Bgcolor = "#000000"
Text = "#ffcc66"
Link = "#ffff99"
Vlink = "#ffcc33"
Alink = "#ff0000"
>
The attribute's value is the
URL
of the graphic that will be tiled as the background of the page.
The user will not see this background in non-compliant
browsers,
if image loading is turned off, or if the user
has overridden the background images in their preferences.
If a background file specified in the Background attribute cannot be
found, the
color specified by the BGCOLOR tag will be used.
The BGCOLOR will also be used if the user has auto load images off.
The background image will be tiled in the browser's document viewing
area.
Design Issues
A couple of problems to watch out for:
make sure the background image and text and link
colors contrast well.
There are many pages on the web that are unreadable because
the text or links are swallowed up by the background
color.
They probably looked fine to the page designer on their own screen,
but unfortunately screens - and other people's eyes - vary
considerably.
Take care about the amount of detail in the image. Too much - in
fact, almost any - can reduce readability.
If it does, you might find it better to place a plain color behind the
text, e.g. by enclosure in a
table cell, or by using
style sheets.
When specifying a background image it is a good idea also to specify a
background color.
That
color should be one similar to the prevailing color of the
image; this ensures that if the user viewing your page has image
loading off, or if your background image cannot be loaded for some
reason, the page will still look close to the way you intended.
If the image you specify as a background has transparent areas,
the BGCOLOR will show through
(beware, this can show up as black on Macs).
The attribute sets the
color of the background as "#rrggbb"
where "#rrggbb" is a hexadecimal red-green-blue triplet.
Take care to select a default color similar to the background image's
predominant color, and to explicitly set the foreground and link
colors to contrast adequately for readability.
An extremely common error is to assume that everyone's default text
color is black...
As you should already be aware, it is bad practice to load a background
or any other image to your page, from another person's web site,
without their prior agreement. And be aware that if you do, your page
will suffer the consequences if their server goes down or if they move
the images.
Further Resources
Patterns 4 Us
These backgrounds can be viewed in a left-frame, and when clicked on
the right-frame is re-displayed with the background. The text remains
readable with all backgrounds because it is enclosed in a table cell
with a white background color.
Netscape's Background Sampler
To obtain these backgrounds and use them in your own pages you can
either refer to them on Netscape's server,
or copy them and use them yourself.
Textures for HTML 3.0 Clients
Another site that permits downloading from their server.
A small but interesting selection.
|
