Background Colors & Textures

You may have noticed that the background for this page is white, while on the sample page it is grey. Most browsers set the default color to grey when no other color is specified. For our first.html file we need to add a color background. The HTML format for adding a solid color background involves modifying the <body> tag to read: 
    <body bgcolor=#XXXXXX>
where XXXXXX is the hex-code assigned to the desired color (indicated by the # sign in front).

If you want to create a black background, place the following line in the first.html file: 

    <body bgcolor=#000000>

If you did things correctly, your browser should have changed the background to solid black.

You may have noticed that your text disappeared, because the default text color is also black. To correct this, we can alter other variables it the body tag to color the text and the hypertext items: 

    <BODY BGCOLOR=#XXXXXX TEXT=#XXXXXX LINK=#XXXXXX VLINK=#XXXXXX>
where the XXXXXX values will determine:

You can now add some of these other color values by changing the tag to read: 

  <BODY BGCOLOR=#000000 TEXT=#EEEEBB LINK=#33CCFF VLINK=#CC0000>
This will provide a black background, yellow text, light blue links, and red visited links. (The order of the items in the <BODY> tag does not matter)

Your finished product should look like this sample page.

Textured Backgrounds

While solid colors add variety to web pages, textured backgrounds add a higher degree of the "schmooze factor". A properly created image file (GIF or JPEG) will appear as a smooth background in your web page with repeated copies of the image.

In order to add a textured background, you must refer to an image file in the <body> tag. The following four examples reference four different background pictures from a folder called "images", but the previous TEXT, VLINK and LINK tags removed to restore the text color to black: 

<body background=images/cloud.jpg>

<body background=images/bands.jpg>

<body background=images/brain.jpg>

<body background=images/stripe.gif>

Look at the sample pages below to see how different background tiles effect your ability to read the text:

  1. Clouds Background
  2. Rubberbands Background
  3. Brain Background
  4. "Stripe" Background

You may have noticed that the Clouds are not well-tiled and the rubberbands make the text rather hard to read. I find the brain background easier on the eyes, due to the grey color. The final "stripe" example is actually a long picture, about 150 pixels blue, 600 pixels white, 5 pixels high, which repeats itself to give the appearance of a left margin. Look at the stripe picture to see how this works.

Index of topics next topic: Graphics