HTML Background HTML Background
HTML Background Tutorial and Information







HTML Tutorial - HTML Background

A background can be set for the entire HTML document or web page, or just for a specific part of a web page. (E.g. table background). The background can be specified as a solid color, or an image can be specified to act as the background.

How To Set A Background Color

A background color can be set with the bgcolor attribute where the value can be specified as the color name (red), a hexadecimal color value (#FF0000), or an RGB value (255,0,0). More about HTML colors.
In this example the background color for the entire web page is set by adding the bgcolor attribute to the <body> tag: 
<body bgcolor="red">
<body bgcolor="#FF0000">
<body bgcolor="rgb(255,0,0)">

How To Set A Background Image

A background image can be set with the background attribute where the value is the location (URL) of the image you want to use as a background. The background image location can be specified as "relative" (local image file) or "absolute" (the image is located at another location).
Here is an example for a relative and absolute background image: 
<body background="images/image.gif">
<body background="http://www.webmasterseminar.com/images/image.gif">

Note: Unless the background image is set to not repeat itself, and if the background image is smaller than the browser window, the image will repeat itself horizontally as well as vertically to fill out the entire browser window or background of the web page, or the table if used as table background.

Important: The bgcolor and background attributes are deprecated and should no longer be used according to recommendations by the W3C. These background attributes do no longer validate with XHTML (the latest version of HTML). Background colors and background images should be specified with CSS (Cascading Style Sheet).

How to Use Background Colors and Background Images With Tables

Just like in the example above, the bgcolor and the background attribute can be added to a table as well.
Here is an example for a background image set for the entire table: 
<table background="images/image.gif" border="1" height="100" width="100%">
  <tr>
    <td>This table has a background image</td>
  </tr>
  <tr>
    <td>This table has a background image</td>
  </tr>
</table>
This table has a background image
This table has a background image

As you can see, the background image repeats itself horizontally and vertically, however, the blue text can not be read very well with the blue background image. This is not a very good example of using an image as background!

Setting The Background For A Table Cell

The background color or background image for a table can be set individually for each table cell: 
<table border="1" height="100" width="100%">
  <tr>
    <td background="images/image.gif">This table cell has a background image</td>
  </tr>
  <tr>
    <td bgcolor="red">This table cell has a red background color</td>
  </tr>
</table>
This table cell has a background image
This table cell has a red background color

For more information about tables and table properties visit HTML tables.

Important: The bgcolor and background attributes are deprecated and should no longer be used according to recommendations by the W3C. These background attributes do no longer validate in XHTML (the latest version of HTML). Background colors and background images should be specified with CSS (Cascading Style Sheet).

How To Use Background Colors and Background Images The Right Way

First and foremost make sure your background image is optimized for the web. Otherwise the background image could take a long time to load for users with a slower internet connection. Another very important aspect with background images is whether or not the colors of the background image clash with the color of the text and make it very difficult or impossible for the user to read the text of your web page. This applies to background colors as well.

Use your background colors wisely to make sure the text on your web page can be read easily and clearly. Make sure your background color and/or your background image(s) go with other images and colors of your web site. Make sure your background image looks good when it repeats itself horizontally as well as vertically.



HTML Related Links

© This Article is Copyrighted by WebmasterSeminar.com

Please do not copy or reproduce this article in whole or part, in any form, without mentioning the source and including a live link back to WebmasterSeminar.com - Thank You!

LINK TO THIS TUTORIAL:


Copy the code below and paste into your web page 
<a href="http://www.webmasterseminar.com/htmlbackground.php">
Webmaster Seminar</a><br />
HTML Background - Free Information, Tutorials and HTML Resources



HTML Background - © WebmasterSeminar 2000 - 2008 Terms Of Use