Larry's Graphics Web Design

Sections

• Inside

• ZipArchive

• Samples

• Tutorials

• Banner Factory

• Forum

Background

Introduction to Backgrounds

The most important part of a web page is probably the background. Whether you use a tiled
picture or a solid colour there are certain things to keep in mind. A well chosen background, be
it a tiled picture or a solid colour, can work wonders with your site and lift it from obscurity to
prominence.


It is not for me to say whether you should use a picture or a solid colour. That is entirely up to
your own taste. Do keep in mind, though, that the majority of the professional web sites have a
solid colour background. So have I, by the way :). Also keep in mind that a background first and
foremost should be in the background. Hence the name.

Menu

• Fonts

• Colours

• Images

• Indents

• Tables

• Linking

How to choose the right background

The sole purpose of the background is to highlight the content of the site. It should work the
same way a picture frame does. You choose a picture frame that goes well with the colours in
the painting and brings it out to the viewer. A web site background works the same way.

Too bright colours or pictures with too colourful and / or distinctive patterns are useless since
they distract the visitor (or customer, if you have a commercial site) and divert his attention
from the important part: The content. Like I mentioned earlier most professional sites use a
solid colour background. The reason for this is rather obvious.

A solid colour background is clean and make the content stand out provided the colour isn't too
bright or too dark. White or a light cream or tan colour is the best for most sites, but you can
also use other colours. It depends very much upon the colours in your graphics and text. You
will have to experiment your way to a background that suits your site.

How to specify a background picture or colour

The background colour is specified in the <body> tag of the HTML document (same place as the
font colour). Just like when specifying the font colour you should use hex values. This site is using
the colour white and the hex value (it's actually hexadecimal) for white is #FFFFFF To find the right
colour and hex value you can use this colour chart:

Colour chart here

To use a tiled picture as a background you have to specify the picture (the path to it) in the
<body> tag. The code is a little different from the code you use for an ordinary picture. Let's
assume you want to use a picture named bckg2.gif as your background. Then you would have
to specify it like this:

<BODY BACKGROUND="bckg012.gif">

Of course, you specify the text colours before the >. If you, like me, have all your images in a
special folder (named 'pics'), then the code (path) would have to look like this:

<BODY BACKGROUND="pics/bckg012.gif">

When using a tiled image as a background (remember the pattern should be fairly discrete) you
can obtain a cool floating text effect by adding this to the <body> tag: BGPROPERTIES="fixed"
This make the background stay put and only the text move when scrolling up or down the page.
NOTE: The BGPROPERTIES="fixed" only works in Internet Explorer!

b

-- Close this window to return to the main page window --