HTML backgrounds
A background can often be an important part of a webpage. You can use backgrounds to make a webpage look more appealing or simply to add more style. Backgrounds can also be used in tables.
This lesson focuses on:
- Adding a background color to elements
- Adding a background image to elements
Adding a background color to elements
You can set the background color of elements using the bgcolor attribute. This attribute can take a color name, a hexadecimal value, or an RGB value.
Setting the background color of a webpage
Example:
<body bgcolor="#FFFFFF"> <body bgcolor="rgb(255,255,255)"> <body bgcolor="white">
The above lines of code will all set the background color of a webpage to white.
Setting the background color of a table
Example:
<table border="1" bgcolor="#E5E5E5">
<tr>
<td>One</td>
<td>Two</td>
</tr>
<tr>
<td>Three</td>
<td>Four</td>
</tr>
</table>
Output:
| One | Two |
| Three | Four |
Setting the background color of a table row
Example:
<table border="1"> <tr bgcolor="yellow"> <td>One</td> <td>Two</td> </tr> <tr bgcolor="green"> <td>Three</td> <td>Four</td> </tr> </table>
Output:
| One | Two |
| Three | Four |
Setting the background color of a table cell
Example:
<table border="1"> <tr> <td bgcolor="#F5F5F0">One</td> <td>Two</td> </tr> <tr> <td bgcolor="#8DA1B5">Three</td> <td>Four</td> </tr> </table>
Output:
| One | Two |
| Three | Four |
Adding a background image to elements
You can add a background image to elements using the background property. The value of this property should be the URL of the image. The URL can be relative or absolute.
Adding a background image to a webpage
<body background="ice.gif"> <body background="http://www.landofcode.com/images/ice.gif">
In the above code, the URL is a relative path in the first line, and an absolute path in the second line.
Adding a background image to a table
<table border="1" background="ice.gif"> <tr> <td>One</td> <td>Two</td> </tr> <tr> <td>Three</td> <td>Four</td> </tr> </table>
Output:
| One | Two |
| Three | Four |
NOTE: The bgcolor and background attributes are deprecated in HTML 4 and XHTML. CSS should be used instead.
