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 web page. To add a table background, you'll need to make changes to the cascading style sheet supporting your web page.

Modern Office buildings forming part of the Greenwich Peninsula Regeneration, South East London, UK
Construction Photography/Avalon / Getty Images

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.

Insert a CSS style block in the head of your document:


Write your CSS for the background on your table and put it inside the style block:

Place your table in the HTML:

cell 1cell 2
cell 1cell 2

Set the width and height of the table to match the image width and height.

Set the width and height of the table to match the image width and height.

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. To put the background on only specific tables, use a class attribute. Add the class background to any table you want to have that background image. Set the width and height for those tables.

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 override the background image on the table. So be careful when using background colors on your cells in combination with table background images. 

Considerations

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!

Table backgrounds 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.

Format
mla apa chicago
Your Citation
Kyrnin, Jennifer. "How to Set an Image as a Background for a Table." ThoughtCo, Apr. 5, 2023, thoughtco.com/set-image-as-table-background-3469870. Kyrnin, Jennifer. (2023, April 5). How to Set an Image as a Background for a Table. Retrieved from https://www.thoughtco.com/set-image-as-table-background-3469870 Kyrnin, Jennifer. "How to Set an Image as a Background for a Table." ThoughtCo. https://www.thoughtco.com/set-image-as-table-background-3469870 (accessed March 29, 2024).