There are two ways to decorate your web page background.
Html Background Colors
The bgcolor attribute is used to control the background of an HTML elmement, specifically page body and table backgrounds. Following is the syntax to use bgcolor attribute with any HTML tag.
<tagname bgcolor="color_value"...>
|
This color_value can be given in any of the form.
<!-- Give color name -->
<table bgcolor="lime" >
<!-- Give hex value -->
<table bgcolor="#f1f1f1" >
<!-- Give color value in RGB terms -->
<table bgcolor="rgb(0,0,120)" >
|
Example:
Here are the examples to set background of an HTML tag.
<!-- Give color name -->
<table bgcolor="yellow" width="100%" >
<tr><td>
This background is yellow
</td></tr>
</table>
<!-- Give hex value -->
<table bgcolor="#6666FF" width="100%" >
<tr><td>
This background is sky blue
</td></tr>
</table>
<!-- Give color value in RGB terms -->
<table bgcolor="rgb(0,0,255)" width="100%" >
<tr><td>
This background is blue
</td></tr>
</table>
|
This will produce following result:
| This background is yellow |
| This background is sky blue |
|
Html Background Images
The background attribute can also be used to control the background of an HTML elmement, specifically page body and table backgrounds. You can specify an image to set background of your HMTL page or table. Following is the syntax to use background attribute with any HTML tag.
The background is deprecated and it is recommended to use Style Sheet for background setting.
<tagname background="Image URL"...>
|
Example:
Here are the examples to set background images of a table.
<!-- How to set a table background -->
<table background="/images/html.gif" width="100%" height="100">
<tr><td>
This background is filled up with HTML image.
</td></tr>
</table>
<table background="/images/home.gif" width="100%" height="100">
<tr><td>
This background is filled up with home image.
</td></tr>
</table>
|
This will produce following result:
| This background is filled up with HTML image. |
| This background is filled up with home image. |
|
Note that when your HTML element is larger than the dimensions of your picture, the image simply begins to repeat itself.
Patterned & Transparent Backgrounds:
You might have seen many pattern or transparent backgrounds on various websites. This simply can be achieved by using patterend image or transparent image in the background.
It is suggested that when creating patterns or transparent gifs, use the smallest dimensions possible even as small as 1x1 if you can. Larger files load slow and inhibit the load time of your sites.
Here are the examples to set background pattern of a table.
<!-- How to set a table background using pattrern -->
<table background="/images/pattern1.gif" width="100%" height="100">
<tr><td>
This background is filled up with a pattern image.
</td></tr>
</table>
<!-- Another example on table background using pattrern -->
<table background="/images/pattern2.gif" width="100%" height="100">
<tr><td>
This background is filled up with a pattern image.
</td></tr>
</table>
|
This will produce following result:
| This background is filled up with a pattern image. |
| This background is filled up with a pattern image. |
|
