I've been working with background images on some recent custom projects, and I thought some of you might be interested in reading about my experiences with background images for pages, tables, and table cells.

I used to avoid them like the plague for a few reasons. 

Older versions of Netscape did not support background images for table cells.  Subsequent versions of Netscape did support them but created a mess if you ever wanted to nest a sub table in a cell that's using a background image.  The only fix for that was to make sure the sub table was using solid color background images.  The worst problem I've had with background images, however, is that you have to make sure your design proposals don't include an element over the image that uses a drop shadow, outer glow, or some similar effect.  A drop shadow doesn't gradually fade from black to transparent.  It fades from black to some underlying background color.  You can make that background color transparent, but you cannot make the shades that lead to that color transparent.  The result is an ugly looking cloud around the image when it's placed over the background. 

But they're fun!

I think it's possible to carry any approach too far.  I always try to keep things as simple as possible and avoid the unnecessary, but there are times when the design effects are good enough to warrant some extra development time or potential compatibility issues with antiquated browsers.  In the case of background images, a more sophisticated look doesn't have to take much if any extra time to create as long as you know what you're doing.

In this article, I'm going to show you a couple of background image effects made possible by the use of CSS.  The code is really simple, and I think the effects can serve to greatly enhance effectiveness  of a Web page's message.

Non Tiling Table Cell BG Images

When you use a background image for a breakout box, tiling can be an issue because the amount of text in the box can vary.  You can wind up with a cut-off image.  Sometimes that's fine.  Other times, it's not.  My client, in the case below, would not have been happy at all to see a partial version of the US flag.

	Wisi e nim admin im veniam, quis nostrud. In atsvulpate velt esse meleste at semper manet sola. Ut lacreet dolore magna aliquam sic semper fi tyrannis erat volutpat. Wisi enim ad minim veniam. Dolore eu sata sfeugiat. Ipsum lorem vei illum sat dolor euis mod tincidunt vei auminiure dolor in esse.

The code to keep the image from tiling is easy.  Just put this attribute (STYLE="background-repeat: no-repeat;") in the td tag like this.

<td width="121" background="images/box_bg.jpg" STYLE="background-repeat: no-repeat;" bgcolor="#B40024">

The only thing to worry about now is that there might not be enough text to force the table cell long enough for the image.  Theoretically, you can just give the table cell a height attribute equal to the height of the bg image.  I'm used to forcing cell heights and widths with clear dot gifs, however, because there used to be quite a few browsers around that didn't handle the height attribute properly.  I tend to use that technique because I know for certain how all the browsers I care about will interpret it.  For more on forcing cell heights and widths, look here.

In Part II of this article I will show you a non tiling and non scrolling background image for a page.  I think it's a pretty cool effect, and it's very easy for even a complete beginner to implement.

Part II >>