HTML Color – bgcolor
Posted by admin | Posted in HTML Tutorial | Posted on 11-08-2010-05-2008
0
The bgcolor attribute is used to control the background of an HTML elmement, specifically page and table backgrounds. Bgcolor can be placed within several of the HTML tags. However, we suggest you only use it for your page’s main background (<body>) and in tables.
Example:
<body bgcolor=”Silver”>
<p>We set the background…</p>
</body>
Paragraph Bgcolor:
We set the background of this paragraph to be silver. The body tag is where you change the pages background. Now continue the lesson to learn more about adding background colors in your HTML!
Adding Color to Your Tables
We can add colors to the tables, and to the text inside the rows and columns.
Example:
- <table bgcolor=”lime” border=”1″><tr>
- <td>A lime colored table background using color names.</td>
- </tr></table>
- <table bgcolor=”#ff0000″ border=”1″><tr>
- <td>A red colored table background using hexadecimal values “#FF0000″.</td>
- </tr></table>
- <table bgcolor=”rgb(0, 0, 255)” border=”1″><tr>
- <td>A blue colored table background using RGB values “rgb(0, 0, 255)”.</td>
- </tr></table>
Table Bgcolors:
| A lime colored table background using color names |
| A red colored table background using hexadecimal values “#FF0000″. |
Adding Color to Table Rows & Columns
Here’s a few common examples of “bgcolor” and font color
Example:
- <table>
- <tr bgcolor=”#FFFF00″><td>This Row is Yellow!</td></tr>
- <tr bgcolor=”#AAAAAA”><td>This Row is Gray!</td></tr>
- <tr bgcolor=”#FFFF00″><td>This Row is Yellow!</td></tr>
- <tr bgcolor=”#AAAAAA”><td>This Row is Gray!</td></tr>
- <tr bgcolor=”#FFFF00″><td>This Row is Yellow!</td></tr>
- <tr bgcolor=”#AAAAAA”><td>This Row is Gray!</td></tr>
- </table>
Alternating Colors:
| This Row is Yellow! |
| This Row is Gray! |
| This Row is Yellow! |
| This Row is Gray! |
| This Row is Yellow! |
| This Row is Gray! |
Background Color and Font Color Together!
Example:
- <table bgcolor=”#000000″>
- <tr><td bgcolor=”#009900″>
- <font color=”#FFFF00″ align=”right”>Green Bay</font></td>
- <td><font color=”#FFFFFF”>13</font></td></tr>
- <tr><td bgcolor=”#0000FF”>
- <font color=”#DDDDDD” align=”right”>New England</font></td>
- <td><font color=”#FFFFFF”>27</font></td></tr>
- </table>
Scoreboard:
| Green Bay | 13 |
| New England | 27 |
Example:
- <table bgcolor=”#777777″>
- <tr><td>
- <p><font face=”Monotype Corsiva, Verdana” size=”4″ color=”#00FF00″>
- This paragraph tag has…
- </font></p>
- </td></tr>
- </table>
Colored Paragraph:
| This paragraph tag has a gray background with green colored font. You should see Monotype Corsiva font if you have it installed, or Verdana as the backup. Both fonts are widely accepted as standard fonts. |
Background
We can place images within the elements of HTML. Tables, paragraphs, and body can have a background image.
the background atrribute is used for setting a specific color or an image, whichever needed.
Example:
- <table height=”100″ width=”150″
- background=”http://www.tizag.com/pics/htmlT/background.jpg” >
- <tr><td>This table has a background image</td></tr>
- </table>
Background Image:
| This table has a background image |
If the image being used is of same dimension then it will be diplayed as it is, if the image is larger then only a part of iamge will be displayed. And if the image is smaller then it will go on repeating itself to cover up the whole web page like a tiled background.
Example:
- <table height=”200″ width=”300″
- background=”http://www.tizag.com/pics/htmlT/background.jpg” >
- <tr><td>This table has a background image</td></tr>
- </table>
Repeating Background:
| This table has a background image |
It is obvious this is often not the desired outcome, however, it can also be quite useful as you will see in the following example.
