<NOTE> If you came to this page looking for backgrounds
to use at your site, you may want to have a look at the templates
section. This page is about how to use backgrounds. </NOTE>
The look and feel of a site is for a large amount determined
by the background of the pages. You can easily change text, link, and
background color almost any way you want to. Most graphical browsers allow
you to use bit map images as background as well. Just like your Windows
desktop it is tiled to fill the entire background. A small image suffices
to fill it.
The standard color of your browser is light gray. Sometimes
you see this on pure text oriented pages. The easiest way to change the
background is to use the BGCOLOR attribute of the BODY tag. This page
for example uses bgcolor="#FFFFFF", white for the experts. Colors
are specified in hexadecimal numbers, two digits for each of the colors
red, green and blue. You can choose from a spectrum of 16.7 million colors.
Computer monitors often do not display more than 256 colors
simultaneously. Choose a color in this limited spectrum. You can do this
by only using the codes 00, 33, 66, 99, CC, and FF. You have 6x6x6=256
options. If you don't do this, your browser will pick a color for you,
the closest match possible. Light colors may become white, dark tinges
may go black.
You can also use an image to fill the background. To do
this u use the BACKGROUND attribute of the BODY tag. Any GIF or JPEG file
can be used. You don't have to fill the whole background, a small image
will do. Your browser will fill the rest of the page with copies of the
same image. To avoid lines or chequered patterns, often seamless tiles
will be used. The background will appear to stretch over the edges of
the image used.
If you are changing the background, keep the legibility
of your text in mind. A colorful background will soon start competing
with your text. Sometimes you will have to use a larger font to keep it
readable. Take care of the contrast with colors or colorful backgrounds.
If there is not enough difference in brightness, color blind people (about
10% of all people!) will not be able to read your pages. Many others will
have great difficulties too.
| red
on blue |
cyan
on orange |
green
on yellow |
Beware of too much or too little contrast. It may look
nice at first sight, but it will become irritating for your eyes. The
text may seem to float above the page, caused by the difference in refraction
in your eye lens. Keep looking a little longer at the same spot and the
text will dissolve to the background. The best possible option is still
black on a white background. Next comes a dark shaded text on an off white
background.
Use small files for your backgrounds. Especially if you
plan to use a different background for each page. A screen filling image
may seem nice, but it will take very long for the image to appear. You
will need a file of at least a 100 kilobytes. You are wasting a lot of
bandwidth in the process, and most visitors won't wait for it to appear.
A nice trick is to use a partially transparent GIF image.
You can use the BGCOLOR attribute to change a part of your page. Doing
this you can give a color to each page or group of pages, without using
any extra bandwidth -- saving precious download time.
When using a background image, always specify the background
color as well. Pick a color which closely resembles the main color of
the image. You can for example use a white text on a dark background.
If the browser is setup to display a white background by default, your
text will be unreadable until the image is loaded. You can also surf the
web without loading images. A virgin white page will be the result.
Photos will often show big contrasts. Whatever color you
choose, some spots will render your text unreadable. Or your text will
dissolve entirely. You can counteract this by reducing the contrast and
brightening the image. You will need a graphics editor to do this, like
Photoshop or Paint Shop Pro. You can also add a matrix or a color shade
to the image. This can give a very professional look. You could for example
add a company logo to your background.
People can be pig-headed. Sometimes they just don't want
to see background images. Sometimes they have no need for images, loading
them takes too much time. These people will alter the settings of their
browser. You should take the effects into account. Will your text still
be readable on a white or gray background? You cannot think of everything,
but try some possibilities. At least you should view your pages without
background images.
Help promote this site
If you liked this tutorial, then why don't you help me promote
it. The best thing to do is to put up a link at your web site. A simple
text link is enough, preferably at your home page, preferably to the top
of the page. Why? Search engines rate sites by the amount of links referring
to them. Just add the folowing code to your site.
<a href="http://www.thedragonslayer.tk/">thedragonslayer.tk</a>