Creating effective web pages.
Graphics add life to web pages. They entertain, inform, and assist visitors when used properly. Read some tips for creating effective web pages, using background images. It covers colors, size, and styles which work best on the web.
Adding Images to web pages.
Before using background images, it needs to be available to web visitors. Read this article on adding web page images to see what you need to do.
Tips for background images.
Make each single 'tile', in a background image, as small as you like. While a 2 x 2 pixel tile downloads very quickly, it requires more processing time to fill the screen. In this case, screen updates become painfully obvious.
Don't use background tiles which are too small. Experiment using different sizes, and number of repeats, to find the best compromise between downloading time and screen redraw.
Note: On some older Mac OSes, they have problems with background tiles less than 64 pixels wide. Here, a minimum tile size of 64 by about 32 is optimal.
Remember type usually has to go over your background image. If the pattern, of the background image, is too strong, it makes the type hard to read.
A dark type on a light background and light type on a dark background work, without too much trouble.
When you using a mid-tone background, use color-contrast to make the type stand out (i.e. yellow on blue. However, this increases the chance of compromising visibility.
Backgrounds & images - How they work.
Background images are created from small GIF, or JPEG, tiles. They download, and display, fairly quickly. After downloading, any GIF or JPEG image is available to be reused, in multiple 'instances', on a web page. This requires little to no extra overhead.
The browser stores all images in its 'cache'. This is saved, so when you switch off the computer, they stay there. They remain until the browser cache is full, or cleared. If full, the browser offloads the oldest images to make space for new ones. Emptying the cache manually requires using your browser's preferences dialog.
Fancy rules, logos, bullets, and animated icons bring a dull page to life, without making the reader wait.
Background Image code.
Use a background on the entire web page, a table, or within a table.
<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">
The lines above all set the background color to black.
The background attribute also sets the background to an image. The value of this attribute is the URL of the image used. If the image is smaller than the browser window, the image repeats itself (tiles), filling the entire browser window.
<body background="clouds.gif">
<body background="http://www.yahoo.com/clouds.gif">
Background images are available for tables, too.
|