|
Backgrounds help set the tone for a site, and adding one is very simple. There are two ways of adding a background: using a solid color or using a graphic. We will first look at using a solid color background.
Using a Solid Color
There are two ways of using a solid color. You can use the name of the
color such as blue or red, or you can use the code number for the color
such as #FFFFFF (this will be explained later in the tutorial). To add a
background color we use the attribute BGCOLOR="color" inside the BODY tag
<BODY BGCOLOR="color">
The name of the color or the code is substituted where it says
"color". Suppose we want a blue background. This is what it will look
like:
<BODY BGCOLOR="blue">
Using the color code allows for a wider range of colors that can be
used and helps make your site more unique. All color codes begin with "#" and consist of 6 digits, a
combination of letters and numbers. You can experiment with these
digits. Two of the most commonly used color codes are black (#000000) and
white (#FFFFFF). This site provides a
chart with a few colors to get you started. Here's an example using
the color code. It will produce a shade of blue.
<BODY BGCOLOR="#0099CC">
Using a Background Image
Adding a graphic for the background is just as easy. File names for
the graphic must end with either ".jpg", ".jpeg" or ".gif". When using a graphic, the web browser will
tile the picture for you.
Below is an example of a background graphic. Clicking the graphic will open a new browser window to show how it is tiled.
In order to use a graphic as a background we use the attribute BACKGROUND in the BODY tag and set it equal to the name of the graphic:
<BODY BACKGROUND="graphic.jpg">
When creating a background you can use both a solid color and a
graphic. The solid color appears first while the graphic is loading, and
once the graphic has loaded it will cover the solid color:
Order doesn't matter with the BGCOLOR and BACKGROUND attributes.
Switching them will produce the same results:
<BODY BACKGROUND="graphic.gif" BGCOLOR="#000000">
Here is a sample page of what we have covered so far:
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> |
| <HTML> |
| <HEAD> |
| <TITLE>Title of page</TITLE> |
| </HEAD> |
| <BODY BGCOLOR="#000000" BACKGROUND="graphic.jpg">
|
| </BODY> |
| </HTML> |
This page has been accessed
  
times since June 24, 2001
Last Updated March 21, 2001
|
