HTML Backgrounds - Lesson 4

In Lesson 4, we're going to be looking at backgrounds. You can set a solid color as the background of your website, or you can use an image. To specify a color for the background you use the bgcolor attribute. The two most common ways of entering a color to choose is by either entering the color name or a hexadecimal number. First let's look at the color name. The bgcolor attribute fits in the body tag, as follows:

<body bgcolor="green">

The code above will tell the browser to use a green background color. The only problem with this method, is that there is a limited selection of colors. For example, you wouldn't be able to tell the browser to make it a slightly darker green. Only 16 colors can be specified by name.

Enter method number 2. Using the hexadecimal number scale, you can define a number that equates to a certain color. Each color has a six number code e.g black is 000000 and red is ff0000. When using this in HTML, you use the hash (#) before defining the number, like so:

<body bgcolor="#000000">

Right, now you can define a color, lets see how to use an image as your background. If you use a small image, the browser will repeat it over and over until the background is filled. The following code will do the trick:

<body background="http://www.YourSite.com/Image.gif">

Be careful when using an image for your background, it can increase the loading time of the page. Make sure it does not contrast too much with the other images and text on the page. For example if you have an image of clouds, you need to make sure your text is not white. Also ensure that the background is there to compliment the page, not steal focus.