1. Technology

How do I set an image as a background for a table?

By

Question: How do I set an image as a background for a table?

The best way to add a background image to a table is to use the CSS background property. But there are a few other things you need to remember to do to get the background to display as you expect.

Answer:

To set a background image on a table, use the background property in CSS. But there are some things you should do to make sure the background displays as you expect.

  1. Get your background image and make a note of the height and width.
  2. Upload your image to your hosting provider. Make sure you 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.
  3. Put a CSS style block in the head of your document:
    <style type="text/css">
    </style>
  4. Write your CSS for the background on your table and put it inside the style block:
    table { background: url("URL to image from step 2") no-repeat; }
  5. Place your table in the HTML:
    <table>
      <tr>
        <td>cell 1</td>
        <td>cell 2</td>
      </tr>
      <tr>
        <td>cell 1</td>
        <td>cell 2</td>
      </tr>
    </table>
  6. Set the width and height of the table to match the image width and height.
    <table style="width:400px;height:500px;"> …
    Remember that 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 from step 2") no-repeat; }
  2. Add the class “background” to any table you want to have that background image. Be sure to 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 repeat 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 from step 2") 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.

Here are some examples: no repeat, horizontal, and vertical.

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. See what I mean.

HTML Tables FAQ

©2014 About.com. All rights reserved.