table background images

problems at best

main page

• back to articles
• colors and uniformity
  • why background images
  • image repeat
  • readability

why background images

One of the most popular questions on this site is, "How do I set a background image in a table?" Let's get into it, but from a slightly different perspective.

The background-image property in CSS applies to many tags, and not just to tables. You can implement it for forms, or just the form text area, or a span. Tables are the most poplar HTML constructs to have background images.

Usually, the table contains some kind of navigation links in it. In order to juice it up (since a surfer will spend a lot of time looking at that area) designers go with background images. And this is almost always a mistake.

image repeat

The background image in a table will repeat or tile in a table. In even a table without cell lines, this can get real sloppy real fast. Firstly, the pictures are often not sized to fit behind the designers desired table size. But even more to the point, the picture is unlikely to tile neatly behind a variable width table (one set with percentage of width as opposed to a set pixel size). As the text size grows, or the viewable area around the table grows, so will the table. The graphic is a fixed size, and will begin to tile unpredictably behind the table. Let's take a look at an example.

Here is a table that has been sized to fit the background image. The screen resolution is at 640x480.

table with background image 640x480

Let's increase the screen resolution and see what happens.

table with background image 1280x1024

This is the same table at 1280 x1024 resolution. You can see how the image has tiled in the table. The solution to this is to use fixed tables with single images or conversely seamless, repeating patterns with sizeable tables.

readability

Something else should leap out at you from the example above; the text in the table has become very hard to read. Placing text over a varying color picture usually is a disaster. But here is a kind of workaround.

Having a lot of color behind text isn't bad if the text is given its own contrasting background. Did you ever closely watch the opening credit of a movie. They usually appear over some action in the movie. Many times the text will come with its own background, or will purposely appear in parts of the scene where the text is most readable.

With style sheets it's simple to color the background of text. With straight HTML, more creativity is required. You could construct a table of three columns, and only color the center cells of the middle column. This is where you would place your links. Then your background image would be viewable above, below and to the sides of the the table. Here's an example below.

table with colored background for text