Web Page Backgrounds
Standard web page have white backgrounds with black text. Coloured text is used for hyperlinks
(normally blue) and for special emphasis - red being common. For many
people that is enough.
Web page backgrounds can however be any
colour that you want, and pages can even have an background image.
The problem with using different web page background colours or
images is the readability of the text. A bad choice of web page
background and text can make your web page totally unreadable.
Changing the Web Page Background
The standard way of changing a web page background is by using the
background and/or bgColor attribute of the body tag
as follows:
For a image background
<BODY BACKGROUND="backimage.gif">
For a coloured background
<BODY bgColor=#ffff00>
combined
<BODY BACKGROUND="backimage.gif" bgColor=#ffff00>
When combining the two the background colour should be the same as
the image and is used in case the image cannot be displayed.
-and to change the default text colour
<BODY text=#ff0000 bgColor=#ffff00 background=test.gif>
You can also change the default colours for hyperlinks:
Using the vlink, link and alink attributes.
<BODY text=#ff0000 vLink=#408080 aLink=#00ff00 link=#ff8000
bgColor=#ffff00 background=test.gif>
It should be noted that although the background attribute is the
most common way of inserting a background image it is no longer
supported in the new HTML 4.0 standards. A better way would be to use
Cascading style sheets.
Having said that it is likely to continue to be supported by all
popular browsers.
Web Page
Background Images
The background image can be in any of the supported formats but .gif
is the most common. You should choose the image with the following in
mind.
1. Not too large. (file size)
2. Doesn't make text difficult to read
3. Enhances or matches the website theme
The image itself doesn't have to be as big as the page and it is
common to use a small 10 pixel height image as the background. If the
image is smaller than the page size it will be repeated (tiled) to fill
the page. The trick is to choose an image that can be tiled seamlessly
to fill a page.
Here are two images that illustrate image choice. The images where
produced using Microsoft paint.
Background image 1-is 20X587 cms- the width being smaller than most
web pages
Background image 2 is 20*1500cms the width being much larger than
most web pages (I've put a border around them so as you can see the
boundaries.
What we are trying to achieve is a web page background with a left
hand margin which will be used as a navigation area. Here are how the
images appear when used as background images.
This page
uses Background image 1 that doesn't fill the page horizontally or
vertically and is repeated but doesn't produce the desired effect.
This page
uses
Background image 2 that fills the page horizontally but not vertically
and is repeated but it produces the desired effect.
Use of Background Images
One of the most common uses of a background image is to create a
navigational area on the left or right of the page. The image is then
overlaid with a table to insert the navigational buttons and web page
text.
This page shows
an example of a table over a background image- I have set the border so
as you can see the tables it would normally not be visible. To remove
the edging at the sides, top and bottom you need to set can set the
page margins all to zero as
shown here.
Benefits of using Web Page Background Images
The same effect could also be achieved by using web page background colours
for table cells but if you wanted to change multiple pages at a later
date you would need to edit all the web pages, whereas if you use an
background image you only need to change the image itself.
