weballey logo
 
left Web design - backgrounds backnext right
homesearchsite mape-mail
GENERAL

APPROACH

BANDWIDTH

LAYOUT

GRAPHICS

palettes
examples
web palette
anti-aliasing
dithering
downsizing
< backgrounds >

      <NOTE> If you came to this page looking for backgrounds to use at your site, you may want to have a look at the templates section. This page is about how to use backgrounds. </NOTE>

    The look and feel of a site is for a large amount determined by the background of the pages. You can easily change text, link, and background color almost any way you want to. Most graphical browsers allow you to use bit map images as background as well. Just like your Windows desktop it is tiled to fill the entire background. A small image suffices to fill it.
    The standard color of your browser is light gray. Sometimes you see this on pure text oriented pages. The easiest way to change the background is to use the BGCOLOR attribute of the BODY tag. This page for example uses bgcolor="#FFFFFF", white for the experts. Colors are specified in hexadecimal numbers, two digits for each of the colors red, green and blue. You can choose from a spectrum of 16.7 million colors.
    Computer monitors often do not display more than 256 colors simultaneously. Choose a color in this limited spectrum. You can do this by only using the codes 00, 33, 66, 99, CC, and FF. You have 6x6x6=216 options. If you don't do this, your browser will pick a color for you, the closest match possible. Light colors may become white, dark tinges may go black.
    You can also use an image to fill the background. To do this u use the BACKGROUND attribute of the BODY tag. Any GIF or JPEG file can be used. You don't have to fill the whole background, a small image will do. Your browser will fill the rest of the page with copies of the same image. To avoid lines or chequered patterns, often seamless tiles will be used. The background will appear to stretch over the edges of the image used.
    If you are changing the background, keep the legibility of your text in mind. A colorful background will soon start competing with your text. Sometimes you will have to use a larger font to keep it readable. Take care of the contrast with colors or colorful backgrounds. If there is not enough difference in brightness, color blind people (about 10% of all people!) will not be able to read your pages. Many others will have great difficulties too.

red on blue cyan on orange green on yellow

    Beware of too much or too little contrast. It may look nice at first sight, but it will become irritating for your eyes. The text may seem to float above the page, caused by the difference in refraction in your eye lens. Keep looking a little longer at the same spot and the text will dissolve to the background. The best possible option is still black on a white background. Next comes a dark shaded text on an off white background.

    Use small files for your backgrounds. Especially if you plan to use a different background for each page. A screen filling image may seem nice, but it will take very long for the image to appear. You will need a file of at least a 100 kilobytes. You are wasting a lot of bandwidth in the process, and most visitors won't wait for it to appear.
    A nice trick is to use a partially transparent GIF image. You can use the BGCOLOR attribute to change a part of your page. Doing this you can give a color to each page or group of pages, without using any extra bandwidth -- saving precious download time.
    When using a background image, always specify the background color as well. Pick a color which closely resembles the main color of the image. You can for example use a white text on a dark background. If the browser is setup to display a white background by default, your text will be unreadable until the image is loaded. You can also surf the web without loading images. A virgin white page will be the result.
    Photos will often show big contrasts. Whatever color you choose, some spots will render your text unreadable. Or your text will dissolve entirely. You can counteract this by reducing the contrast and brightening the image. You will need a graphics editor to do this, like Photoshop or Paint Shop Pro. You can also add a matrix or a color shade to the image. This can give a very professional look. You could for example add a company logo to your background.
    People can be pig-headed. Sometimes they just don't want to see background images. Sometimes they have no need for images, loading them takes too much time. These people will alter the settings of their browser. You should take the effects into account. Will your text still be readable on a white or gray background? You cannot think of everything, but try some possibilities. At least you should view your pages without background images.

Help promote this site
    If you liked this tutorial, then why don't you help me promote it. The best thing to do is to put up a link at your web site. A simple text link is enough, preferably at your home page, preferably to the top of the page. Why? Search engines rate sites by the amount of links referring to them. Just add the folowing code to your site.

<a href="http://www.weballey.net/">WEBalley</a>

bottom  
left Copyright © Gerben Hoekstra - All rights reserved backnext right