HTML Color - bgcolor
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. For additional background styling. The
HTML to
change the background color is simple:
Syntax
<TAGNAME bgcolor="value">
Quick and dirty, here is how to change the background of your web page. Just use the bgcolor attribute in the <body> tag and you are golden.
HTML Code:
<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
This example shows how to add a background color for an entire table using generic values of color.
HTML Code:
<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". |
| A blue colored table background using RGB values "rgb(0, 0, 255)". |
Adding Color to Table Rows & Columns
Here's a few common examples of "bgcolor" and font color
HTML Code:
<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!
Check out this "Scoreboard" we made with the use of font color and bgcolor!
HTML Code:
<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:
HTML Code:
<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.
HTML - Background
Images can be placed within elements of
HTML. Tables, paragraphs, and bodys may all have a background image. To accomplish this, we use the background attribute as follows.
HTML Code:
<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 |
HTML - Background Repeat
In the first example we happen to be lucky because our image and our table had exactly the same size pixel dimensions. Everything looks great. When your
HTML element is larger than the dimensions of your picture, the image simply begins to repeat itself.
HTML Code:
<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.
HTML - Patterned Backgrounds
Repeating a generic image as a background doesn't have much practical use. We either need to find an image to fit exactly as our background or have an
image editing program to adjust the dimensions of our image.
From a different angle, we can use this default attribute to our benefit say if we wanted to have some sort of pattern as our background. In an image editing program such as Adobe Photosop, or
Paint Shop Pro, we could create a very small (perhaps 4X4 pixels) and create a couple of basic patterns.
4x4 Image:
Now here is the same image set as the background to our same table.
HTML Code:
<table height="100" width="150"
background="http://www.tizag.com/pics/htmlT/pattern.jpg" >
<tr><td>This table has a background patterned image</td></tr>
</table>
Pattern:
| This table has a background patterned image |
This technique is definitely one for the pros.
HTML - Transparent Background
Another great techinique, along the same lines as the patterned images, is that of transparent, colored backgrounds. Most image editors have some sort of transparency device to create images that appear see through. We're not going to cover how to do this with every single program, however, most
of the time all you need to do is fill your canvas with the color you would like and then set the opacity to something below 100%. Then make sure you save your file as a gif not a jpeg, and all systems should be go.
Now that you have had the crash course on creating transparent files, you place them onto your websites the exact same way as you would a repeating background.
HTML Code:
<table background="http://www.tizag.com/pics/htmlT/transparent.gif" >
<tr><td>This table has a red transparent background image</td></tr>
</table>
HTML Color Chart
Below is the hexadecimal representation for an array of
HTML background colors. The hexadecimal value that you see displayed in each box represents the value to get the background color of that cell.
| #000000 | #000033 | #000066 | #000099 | #0000CC | #0000FF |
| #003300 | #003333 | #003366 | #003399 | #0033CC | #0033FF |
| #006600 | #006633 | #006666 | #006699 | #0066CC | #0066FF |
| #009900 | #009933 | #009966 | #009999 | #0099CC | #0099FF |
| #00CC00 | #00CC33 | #00CC66 | #00CC99 | #00CCCC | #00CCFF |
| #00FF00 | #00FF33 | #00FF66 | #00FF99 | #00FFCC | #00FFFF |
| #330000 | #330033 | #330066 | #330099 | #3300CC | #3300FF |
| #333300 | #333333 | #333366 | #333399 | #3333CC | #3333FF |
| #336600 | #336633 | #336666 | #336699 | #3366CC | #3366FF |
| #339900 | #339933 | #339966 | #339999 | #3399CC | #3399FF |
| #33CC00 | #33CC33 | #33CC66 | #33CC99 | #33CCCC | #33CCFF |
| #33FF00 | #33FF33 | #33FF66 | #33FF99 | #33FFCC | #33FFFF |
| #660000 | #660033 | #660066 | #660099 | #6600CC | #6600FF |
| #663300 | #663333 | #663366 | #663399 | #6633CC | #6633FF |
| #666600 | #666633 | #666666 | #666699 | #6666CC | #6666FF |
| #669900 | #669933 | #669966 | #669999 | #6699CC | #6699FF |
| #66CC00 | #66CC33 | #66CC66 | #66CC99 | #66CCCC | #66CCFF |
| #66FF00 | #66FF33 | #66FF66 | #66FF99 | #66FFCC | #66FFFF |
| #990000 | #990033 | #990066 | #990099 | #9900CC | #9900FF |
| #993300 | #993333 | #993366 | #993399 | #9933CC | #9933FF |
| #996600 | #996633 | #996666 | #996699 | #9966CC | #9966FF |
| #999900 | #999933 | #999966 | #999999 | #9999CC | #9999FF |
| #99CC00 | #99CC33 | #99CC66 | #99CC99 | #99CCCC | #99CCFF |
| #99FF00 | #99FF33 | #99FF66 | #99FF99 | #99FFCC | #99FFFF |
| #CC0000 | #CC0033 | #CC0066 | #CC0099 | #CC00CC | #CC00FF |
| #CC3300 | #CC3333 | #CC3366 | #CC3399 | #CC33CC | #CC33FF |
| #CC6600 | #CC6633 | #CC6666 | #CC6699 | #CC66CC | #CC66FF |
| #CC9900 | #CC9933 | #CC9966 | #CC9999 | #CC99CC | #CC99FF |
| #CCCC00 | #CCCC33 | #CCCC66 | #CCCC99 | #CCCCCC | #CCCCFF |
| #CCFF00 | #CCFF33 | #CCFF66 | #CCFF99 | #CCFFCC | #CCFFFF |
| #FF0000 | #FF0033 | #FF0066 | #FF0099 | #FF00CC | #FF00FF |
| #FF3300 | #FF3333 | #FF3366 | #FF3399 | #FF33CC | #FF33FF |
| #FF6600 | #FF6633 | #FF6666 | #FF6699 | #FF66CC | #FF66FF |
| #FF9900 | #FF9933 | #FF9966 | #FF9999 | #FF99CC | #FF99FF |
| #FFCC00 | #FFCC33 | #FFCC66 | #FFCC99 | #FFCCCC | #FFCCFF |
| #FFFF00 | #FFFF33 | #FFFF66 | #FFFF99 | #FFFFCC | #FFFFF |
