Articles Tutorials Work at Home Entrepreneurs, Webmasters, Small Business Owners
Articles Tutorials Work at Home Entrepreneurs, Webmasters, Small Business Owners
Articles & Tutorials for Work at Home Entrepreneurs
Webmasters and Small Business Owners
Get More >

Newest Articles 
Search Engine Marketing
Internet Marketing
Affiliate Marketing
Email Marketing
Viral Marketing
Webmaster Resources
Business Resources
Make More Money
CSS
Web Design
Graphic Design
Color Theory
Product Reviews
Time Management
Business Ethics
Promotional Strategies
Glossary of Terms
Direct Mail Marketing
Telemarketing
Product Sourcing



Link to Us!

CSS
Email this article  :  Printer friendly page

Background Images Only in Table Cells

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>

Copyright © 1994-2006 by BasicTips.com, a division of BasicTemplates.com, CSS HTML Web Site Templates with Exernal CSS and Removable Graphics. If you found our articles helpful, subscribe to our newsletter and get articles like this delivered to your inbox - FREE.

Order soon and get up to 5 FREE domains & more!
Host 6 Domains on 1 Account
5000MB and 400GB for $6.95 a month!

 

Page copy protected against web site content infringement by Copyscape
All articles are originally authored by BasicTemplates.com. Reprints in whole or in part are not permitted. See Copyright Notice

Copyright © 1994-2006 BasicTips.com, a division of BasicTemplates.com, Web Site Templates with External CSS
The Internet's #1 Choice for HTML CSS Web Templates via a Membership. Designed using External CSS and Removable, Swap-Out Graphics.
Basic Web Templates | Website Templates | HTML CSS Templates | Web Design Templates | Web Site Templates