How to Set an Image as a Background for a Table

Use the CSS background property to add an image background to tables

Differentiating tables from their backgrounds helps to emphasize the content of the table relative to everything else on the webpage. To add a table background, you'll need to tweak the cascading style sheet (CSS) supporting your webpage.

Getting Started

The best way to add a background image to a table is to use the CSS background property. To prepare yourself to write the CSS effectively and to avoid unexpected display glitches, open your background image and make a note of the height and width. Then upload your image to your hosting provider. Test the URL for the image; one of the most common reasons why images don't display is because there is a typo in the URL.

After you've finished that step, put a CSS style block in the head of your document:

<style type="text/css">
</style>

  1. Write your CSS for the background on your table and put it inside the style block: table { background: url("URL to image") no-repeat; }
  2. Place your table in the HTML: <table>
    1. <tr>
    2. <td>cell 1</td>
    3. <td>cell 2</td>
    4. </tr>
    5. <tr>
    6. <td>cell 1</td>
    7. <td>cell 2</td>
    8. </tr>
    9. </table>
  3. Set the width and height of the table to match the image width and height. <table style="width:400px;height:500px;"> … ​​

If your table contents are larger than the image height and width, the background image will only display once.

Put a Background on Just One Table

The above instructions will set the same background image on every table on the page. If you want to put the background on only specific tables, you need to use a class attribute.

  1. Change your CSS to read: table.background { background: url("URL to image") no-repeat; }
  2. Add the class background to any table you want to have that background image. Set the width and height for those tables. <table class="background" style="width:400px;height:500px;> …

Let the Table Background Image Repeat

Larger tables, or tables with more content, may need to have the background repeat so that the entire table is filled. Change the value in your CSS so that the image repeats on the y-axis, the x-axis, or is tiled on both.

background: url("URL to image") repeat;

By default the repeat value will be tiled, but you can also set the repeat value to repeat-x or repeat-y to tile horizontally or vertically, respectively.

Cell Background Colors Block the Table Background Image

Any background colors set on the table cells will override the background image on the table. So be careful when using background colors on your cells in combination with table background images. 

Considerations

Table backgrounds will set your tables apart from the underlying page. However, think twice before using this technique. Inserting a neutral image may not be distracting, but complicated pictures intended to be cute (for example, inserting a picture of a kitten behind a table indicating pet adoptions) may appear unprofessional and can affect the readability of the tabular data.

Any image you use must be properly licensed; just because you can find a photo on the Web doesn't mean you can appropriate it for your own use. Respect copyrights!