How to Set an Image as a Background for a Table

If you're new to designing Web pages, you might want to know how to set an image as a background for a table. With this tutorial, learn how in just minutes. The process isn't difficult and can be mastered in six simple steps.

Getting Started

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.

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

Firstly, get your background image and make a note of the height and width. Then, 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.

Once 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 from step 2") no-repeat; }
  2. 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>
  3. 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 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.