Background Colors and Background Images

Most browsers support background images through the BACKGROUND attribute within the body element.

Background images can be any of the supported image formats. However, care must be taken when using background images, so it does not overshadow the content of the page.

An effective use of background images is to use the image as a watermark.

There are some important considerations when using Background Colors or Images.

Use low-contrast backgrounds because you do not want the background to overshadow or obscure the text or images on your page. When using Background Colors, you should use Background colors that provide a sharp contrast between the background and the text. A blue background would not be useable because of the blur color of hyperlinks.

Now, we will create the HTML for Body Background colors.
Create a backgnd.html file into your editor, It should look like this:

<HTML>
<HEAD>
<TITLE> Backgrounds </TITLE>
< BODY >
This is the body of the document
</BODY >
</HTML >

View the file in your Web Browser.

Note that the background has no color other than the default specified in your browser.

To add background colors, you will edit the <BODY> tag as follows.
<BODY BGCOLOR="#FFFFFF">

The color attribute is controlled by the Hexidecimal code #FFFFFF, which is White. You can try other codes by finding their code in the HTML Color chart

To add graphics to the background the following modification should be made to the <BODY> Tag.
<BODY BACKGROUND="world1.gif">

Here are examples of pages with Backgrounds and Borders:

The Graphic images shown below have been used in the Example pages. They may be freely copied Example 1
Example 2
Example 3
Example 4



Back to the Tutor Index