Page Background
<body
background="image file name" |
 Sets the page background color Non-scrollable background image |
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">
NOTE:
(All background image examples on this page were created using sTile '99 which is an excellent freeware image editor specifically suited to creating seamless images.)
Now how about using images as links?...
| <~BACK | TOP | NEXT ~> |
