Background color and images with <body> tag extensions


Putting a background color on your page

You can control the background color of your web page (although some browsers support a user-defined color which will override the color specified in a web page).

To specify the color, you must know the color's hexidecimal RGB (red, green, blue) value. If you can find the color's RGB number, you can convert it to hexidecimal using a web-based converter at:
http://www.novalink.com/pei/hex/hex.html.
There is also a Web page of popular color numbers at:
http://www.infi.net/wwwimages/colorindex.html

In this example, the color 00FFFF (no red, maximum green and blue) is light blue. You must specify the color value in the body tag like this:

     <body bgcolor="#OOFFFF">
See this page with the OOFFFF color in the background.

Putting a background image on your page

You can also put a background image on your page by specifying the image name in the body tag. The image will be tiled to fit the page. You can get some ideas for backgrounds by looking at other pages on the Web or by looking at collections of images such as Netscape's Background Sampler. Background images can be in GIF or JPEG formats.

The tag for specifying a background uses the background= attribute with the path or URL to the image. If you create your own image and have it in the directory with the html file, you can just specify the image name.

<body background="metal.gif">

or

<body background= 
"http://www2.ncsu.edu/ncsu/cc/edu/html_trng/advclass/metal.gif">
See this page with the metal background image

If you specify a background color as well as an image, the image will usually take precedence although your page may flash the background color when it first loads.


Return to the Advanced HTML tutorial