Science, Tech, Math › Computer Science How to Set an Image as a Background for a Table Use the CSS background property to add an image background to tables Print Science, Tech, Math PHP Programming Perl Python Java Programming Javascript Programming Delphi Programming C & C++ Programming Ruby Programming Visual Basic View More By Jennifer Kyrnin Jennifer Kyrnin Writer University of California University of Washington Jennifer Kyrnin is a professional web developer who assists others in learning web design, HTML, CSS, and XML. Learn about our Editorial Process Updated on April 14, 2020 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. 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: Read More Change the Background Color of an HTML Table By Jennifer Kyrnin cell 1cell 2cell 1cell 2Set 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. Cite this Article 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). copy citation