HTML Backgrounds

There are two ways to decorate your web page background.

1. Html Background with Colors

2. Html Background with Images

HTML Backgrounds with 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.

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:

<!DOCTYPE html>
<html>
<head>
<title> HTML Background Colors</title>
</head>
<body>
<!-- Format 1 - Use color name -->
<table bgcolor="yellow" width="100%">
<tr><td>
This background is yellow
</td></tr>
</table>
<!-- Format 2 - Use hex value -->
<table bgcolor="#6666FF" width="100%">
<tr><td>
This background is sky blue
</td></tr>
</table>
<!-- Format 3 - Use color value in RGB terms -->
<table bgcolor="rgb(255,0,255)"  width="100%">
<tr><td>
This background is green
</td></tr>
</table>
</body>
</html>
Try it with the Editor

HTML Backgrounds with 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.

<!DOCTYPE html>
<html>
<head>
<title> HTML Table Background</title>
</head>
<body>
<table border="1" bordercolor="green" background="1.jpg">
<tr>
<th>Roll No</th>
<th>Name</th>
<th>Team</th>
</tr>
<tr><td>1001</td><td>John</td><td>Red</td></tr>
<tr><td>1002</td><td>Peter</td><td>Blue</td></tr>
<tr><td>1003</td><td>Henry</td><td>Green</td></tr>
<tr><td>1004</td><td>Ford</td><td>Yellow</td></tr>
</table>
</body>
</html>