Internet, Networking, & Security Web Development How to Set an Image as a Background for a Table Use the CSS background property to add an image background to tables by Jennifer Kyrnin Freelance Contributor Jennifer Kyrnin is a professional web developer who assists others in learning web design, HTML, CSS, and XML. our editorial process LinkedIn Jennifer Kyrnin Updated on April 14, 2020 Web Development CSS & HTML Web Design SQL Tweet Share Email 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 supporting your webpage. 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: <style type="text/css"></style> Write your CSS for the background on your table and put it inside the style block: 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> 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.