Printed from BasicTips.com, FREE helpful articles and tips for Webmasters and Business Owners
Copyright © 1994-2006 by BasicTips.com, a division of BasicTemplates.BIZ
All rights reserved. Republication in whole or in part in any form is not permitted.

Sponsored by BasicTemplates.BIZ
Website Templates with External CSS and Removable Graphics
http://www.BasicTemplates.biz

Co-Sponsored by Effective-Website-Secrets.com
Teaching webmasters effective web development and marketing techniques via free podcasts.
http://www.Effective-Website-Secrets.com

Category: CSS
Background Images Only in Table Cells
By BasicTemplates with External CSS

In our articles we refer to CSS code for external style sheets. If you are not familiar with the different methods of CSS and how or when to use them, be sure to read our article, "External, Internal or Inline? Which Method is Best?"

If you have read our past articles regarding background images, "Easy Borders and Backgrounds using CSS" and "Cheap Background Image Tricks with CSS, Part 5", you might be wondering how to place a background image only in a table cell using CSS as we have done below.

A Background Image in a Table Cell

Its quite simple but the most important element to be aware of is that the style or class must be assigned to the TD tag for Netscape to render the page correctly. It will not render properly if you assign the style or class to the table or table row tags. Older Netscape versions (v4.x) cannot view background images in table cells.

Here's the code to add to your external style sheet:
.tdback { background-image: url(back.gif);}

Then in your HTML code assign the TD tag to the class .tdback as shown below:
<td class="tdback">

Change the URL of the image path to the path of your image on your web server.

Here is the code if you want to use this CSS effect only in a particular document (generally refered to as internal CSS). It must be placed between the HEAD tags of your web page. You also need to assign the TD tag in your HTML code to the .tdback class as described above. Remember though, using CSS in this manner limits you to that document only unless you place it in every page you want to use it. If you want this effect available for all your web pages without having to copy/paste it into every web page, use an "external" style sheet and the code noted above.

<style type="text/css">
<!--
.tdback { background-image: url(back.gif);}
-->
</style>