Page Background

<body


background="image file name" 

bgcolor="color definition" 

bgproperties="fixed">

Sets the page background image
Sets the page background color
Non-scrollable background

Not only can graphics be used individually but they can also be set to repeat or tile themselves across the screen thereby creating a background for your web page. This is accomplished by using the background attribute in the body element. The value for the background attribute can essentially be any image file name however there are some important things to take into consideration when it comes to choosing your background image:

Your background image should be seamless otherwise it will look awkward and unattractive.
Your background image should contain either mostly light or mostly dark colours to facilitate choosing an appropriate contrasting text color.
Your web page text color and the general color of your background image must contrast enough to render readability.

Seamlessness

When an image is seamless, its opposing edges match up and blend together such that when the image is tiled, the seams between the tiles are indistinguishable. Let's use mycoolpic.gif from the previous page in this tutorial to further illustrate.

First we'll run mycoolpic.gif through a special filter to create a seamless version:

Original (1)

Seamless (2)

Next we'll use each of them as background images. For demonstrational purposes, let's imagine the areas represented in Examples 1 and 2 represent your entire web page.

Example 1 - Image tiling with discernable edges

Example 2 - Seamless image tiling

In Example 1, the image is tiled across the background but the edges between each tile are clearly discernable. In Example 2 however, the image was run through a seamless filter which modifies the edges of the image so that opposite edges (left and right, top and bottom) blend together. This creates a smooth background when the image is tiled.

Setting the Background Color

You can set the background color of your web page without using any graphics by simply using the bgcolor attribute in the <body> tag. It is a good idea to always set the background color of your web page if you are using a background image just in case viewers have their browsers set to not display graphics. This is especially important if you have carefully matched your web page text color to contrast with your background image. In the absence of your background image and a background color definition, your text may become difficult to read and in some instances may disappear altogether. The syntax for setting the background color of your web page goes as follows:

<body bgcolor="color definition">

...where color definition equals any legal color definition (see font color for a description of all legal color definitions).

Contrast Between the Background and the Text Color

Equally important is making sure that the text on your web page is still legible after applying your background image. This will depend first on choosing a background image that will make it easier to select a contrasting text colour. The following will illustrate:

Example 3

Black	#000000	Green	#008000
Silver	#c0c0c0	Lime	#00ff00
Gray	#808080	Olive	#808000
White	#ffffff	Yellow	#ffff00
Maroon	#800000	Navy	#000080
Red	#ff0000	Blue	#0000ff
Purple	#800080	Teal	#008080
Fuchsia	#ff00ff	Aqua	#00ffff

In Example 3, we can see that very few (if any) of the 16 recognized color names are usable to render text on a web page employing this background. This background image is a poor choice specifically because it contains a high contrast between dark and light colours creating an eye boggling effect regardless of the text colour which is applied. You will want to choose a background image that contains mostly dark colours to in order to support light coloured text or conversely, one that contains most light colours to support a dark coloured text.

Example 4

Black	#000000	Green	#008000
Silver	#c0c0c0	Lime	#00ff00
Gray	#808080	Olive	#808000
White	#ffffff	Yellow	#ffff00
Maroon	#800000	Navy	#000080
Red	#ff0000	Blue	#0000ff
Purple	#800080	Teal	#008080
Fuchsia	#ff00ff	Aqua	#00ffff

In Example 4, the image is considerably darkened and can now accomodate a much wider choice of text colours. However, note that some of the darker colours such as Black or Navy still tend to wash out against the background. When using a background image or background colour, choose your text colour carefully in order to make it easier to read.

Sidebar Backgrounds

Another way to use graphics as backgrounds is to use ones that stretch all the way across the typical width of a web page and hence only tile vertically. These kinds of backgrounds often place a decorative edge on the left which when tiled vertically create a border running up and down the left side of the page. These background images are commonly known as 'sidebars' and are usually 1025 pixels in width in order to cover a variety of possible screen resolutions. The magic of setting the background image in the <body> tag is that if the image is too wide for the screen resolution of the monitor currently accessing the web page, web browsers will chop off the excess part of the background image on the right and only display that which fits within the user's screen.

Here's an example ~ Sidebar background

Fixing the Background Image in Place

Ever wonder how some people manage to fix their background images in place so that the text appears to float on top as you scroll up and down the page? This is easily accomplished by using the bgproperties="fixed" attribute-value pair in your <body> tag.

Example:

<body background="graphic file name" bgproperties="fixed">

Now how about using images as links?...

Best Free Stuff
for webmasters

Free Text Editors
Free Graphics Editors
Website Analysis Tools
Free Website Templates