Tutorials - HTML - Backgrounds

Background in HTML pages can be of two forms: colors and images. Color will use a solid color as the background (gradients are not supported in HTML4/CSS2, but are in HTML5 and CSS3), and images will use your images as the background. You can set backgrounds on a number of different objects, such as <body> and <table>. In this example we are going to use tables to demonstrate how these work.

Background Color - bgcolor

You can set the background color of an element in three ways. All three ways use the format <TAG bgcolor="">, the color is specified as:

bgcolor="colorname"
bgcolor="#xxxxxx" (Hexadecimal Color Value)
bgcolor="rgb(x,x,x)" (RGB Color Value)

Here's an example of bgcolor being used in a table:

<table bgcolor="rgb(0,255,0)"> <!-- Default table bgcolor: green -->
    <tr>
        <td bgcolor="blue">Blue Background Cell</td>
        <td bgcolor="rgb(230, 230, 230)">RGB Color Value for light grey</td>
    </tr>
    <tr>
        <td>These table cells will inherit</td>
        <td>their color from the table default</td>
    </tr>
    <tr bgcolor="red"> <!-- Default row bgcolor: red -->
       <td>These table cells will inherit</td>
       <td>their color from the row default</td>
    </tr>
</table>

Blue Background Cell	RGB Color Value for light grey
These table cells will inherit	their color from the table default
These table cells will inherit	their color from the row default

Why can't I see some of the colors?

Openzu is written to use the Strict HTML doctype, and in this doctype the "bgcolor" attribute is not supported in tables, so if you are using Firefox you won't see all of the colors. Other browsers may render them. You can learn more about doctypes in our doctype tutorial. Because bgcolor is mainly used in the <body> and <table> elements, it is hard for us to demonstrate it well without using the bgcolor attribute in tables. If you can't see the color and would like to see this demonstrated, download Apple Safari which will display the unsupported attribute

Background Image - background

The background="" attribute works in much the same way as <bgcolor="", except you use an image file instead of a color. For example

<table height="250" width="333" background="/images/bridge-in-london.jpg">
    <tr>
       <td>This table has a background image<td>
    </td>
</table>

This table has a background image

However, if we make the table large than the image, the image will repeat itself.

<table height="250" width="333" background="/images/bridge-in-london.jpg">
    <tr>
       <td>This table has a background image<td>
    </td>
</table>

This table has a background image

This is probably not what you are aiming to do, however it can be used beneficially for some designs. By taking an image which tessellates you can make a repeating patterned background simply:

<table height="250" width="333" background="/images/bridge-in-london.jpg">
    <tr>
       <td>This table has a background image<td>
    </td>
</table>

This table has a background image

Page Responses

Currently there have been no responses to this page...

Post Response

If you have anything to contribute to this tutorial, found a bug, or know a better way of achieving the same goal, please leave your response below.