HTML Table Background Images with CSS

Use CSS background-image to place a decorative background behind an HTML table or cell. The historical HTML background attribute on <table> and <td> should not be used in modern pages.

Background image on a table Top ↑

<table class="photo-table">
  <tr><td>Cell 1</td><td>Cell 2</td></tr>
</table>

.photo-table {
  background-image: url("images/bg1.jpg");
  background-repeat: repeat;
}

Background on one cell Top ↑

Apply a class to a particular <td> when only one cell needs the image. Keep table markup focused on tabular data and presentation in CSS.

Useful background properties Top ↑

Depending on the design, combine background-image with background-repeat, background-position, background-size and a fallback background-color.

Protect data readability Top ↑

A decorative image must not make table text difficult to read. Maintain sufficient contrast and avoid busy images behind important data. Background images also have no useful alternative-text mechanism, so do not use them to communicate essential information.

Original table background demo HTML tables Gradient tutorial

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: