Home → HTML Basics → HTML Tips → Background Image in HTML Tables

Background Image in HTML Tables

You can add a background image in HTML tables by adding background="yourimage.gif" to your <td> tag.

HTML Code

<table border="0" cellpadding="2" width="75%">
<tr>
<td background="yourimage.gif"><font color="White">This example displays your text over your image background.</font>
</td>
</tr>
</table>

Edit the text in bold to suit your needs.

Browser View

Text displayed over an image background.

HTML Code

<table border="0" cellpadding="2" width="75%">
<tr>
<td background="yourimage.gif" width="10%">
</td>
<td width="65%">This example displays your text next to your image background.
This example displays your text next to your image background.
This example displays your text next to your image background.
</td>
</tr>
</table>

Edit the text in bold to suit your needs.

Browser View

This example displays your text next to your image background.
This example displays your text next to your image background.
This example displays your text next to your image background.

Although you can include an image background within your table cells, make sure that your text can still be easily read, as you don’t want your website to be difficult for your visitors to see.

A good rule of thumb is if the image doesn’t enhance your website, it’s best to not include it.

You can learn much more about HTML tables within the HTML Tutorial section.

Give it a try…

<table border="0" cellpadding="2" width="75%"><br /> <tr><br /> <td background="http://www.web-source.net/website-design/wp-content/uploads/tbl_bg.gif"><font color="White"><strong>This example displays your text over your image background.</strong></font><br /> </td><br /> </tr><br /> </table>

To view the results below, after making changes to the above code, place your cursor at the end of the code and press your space bar on your keyboard.

Here’s the result…

This concludes the Background Image in HTML Tables code.

<< HTML Tips

Visit the following pages for a wealth of copy and paste codes and tips:

HTML Tips
Copy and paste special effect HTML codes for your web page.

HTML Codes
An HTML codes chart you can use to copy and paste codes into your web page.

HTML Color Codes
An HTML color codes chart you can use to copy and paste color codes into your web page.

JavaScript Codes
Copy and paste special effect JavaScript codes for your web page.

Web Design Tips
Tips, tricks, and special effect codes for your web page.

HTML Tags
A list of HTML tags.

HTML 5 Tags
A list of the latest HTML tags to be developed.

ASCII Codes
Special text characters and code for your web page.