Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win


How to display table cell background images in IE

Posted on 2008-06-23
Medium Priority
Last Modified: 2013-12-08
Several years ago I created a web page called "LeeTutor's Doing and Fixing Windows" at my ISP's personal webspace site.  (See my E-E profile to get the address.)  I used the free tool from Microsoft, FrontPage Express to do it.  I have recently started working on it again after importing the web pages into an old copy of Dreamweaver that I acquired, version 4 to be exact.  I wanted to change the original site's use of background colors in the table cells to instead use background images of textured designs.  I have succeeded in doing this by changing all bgcolor tags to be background tags.  It looks very nice in Dreamweaver.  But the background images do not display in Internet Explorer!!  The text on my local site displays on a plain white background...  

I tried IE7 in both Vista and XP, and also IE6 in XP, in case it might be a browser bug, and it reacts the same in all of them.  Also doesn't display correctly in Firefox 3 on my Vista computer.

Here is the page on my site that I am trying to modify in Dreamweaver:


I will attach files with screenshots showing what it looks like in Dreamweaver, and in IE, and also the page's HTML saved in a file with the HTM file extension changed to .TXT.

I googled about the problem, and found this interesting page:

Internet Explorer does not display the background image in a table cell

But checking my code, it doesn't suffer from the described problem:  the background tag is in the TD element, not in the TR element.

I am barely above a Beginner in HTML and web page development using Dreamweaver.  Please suggest the easiest way I can get the background images in my table cells to display in IE and other popular web browsers...  And I am looking for EASY ways.  From my googling, I found that I could try doing it using CSS, but I have just barely started learning about that, and the prospect of adding a CSS style sheet to each of my over 500 web pages sounds daunting to say the least!
Question by:LeeTutor
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
  • 2
LVL 11

Accepted Solution

glumlun earned 1000 total points
ID: 21846497
css would definately be the answer here.

attached is a 2 td table with clases appled to the tdd's and the corresponding css at the top of the page.
have a play with that.

let me know if you require any  more help
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
.bg1 {
	background-image: url(yourimage1.jpg)
.bg2 {
	background-image: url(yourimage2.jpg)
<table width="350" border="0" cellspacing="5" cellpadding="5">
    <td class="bg1">&nbsp;</td>
    <td class="bg2">&nbsp;</td>

Open in new window

LVL 44

Assisted Solution

scrathcyboy earned 1000 total points
ID: 21851553
I doubt this is an IE bug, as IE has no problems displaying images for backgrounds.  It is probably that DW is trying to spread or slice the image in some way or other.  You can use either CSS or table specs, but with DW, you will have to fix the code manually, for example --

<TABLE background="images/gif1.gif">
   <TR background="images/gif2.gif">
     <TD background="images/gif2.gif>

etc.  Make sure the path is correct with no preceeding slash.  Remove the "images/" if in the root dir.

or with CSS --

.borderTable { border: 1px solid #000000; background:images/gif1.gif; }
.borderTD { border: 0px solid #000000;  background: images/image2.gif; }
.borderTR { border: 0px solid #000000;  background:images/gif3.gif; }
LVL 59

Author Comment

ID: 21891390
All right, I finally figured it out.  It turns out that Dreamweaver somehow generated an incorrect reference to my background image files in the HTML, and once I corrected that, it worked.  

But before I figured it out (as well as figuring out how to make changes to over 500 different web pages on my local site without individually editing each page of HTML code! -- I was able to use Dreamweaver's global find and replace function), I took a look at the option of using CSS, since you both had recommended it.  I found some nice CSS tutorials on the net and experimented around with the code to see if I could get it working.  I tried in-line CSS, as well as using an external style sheet, and until today I couldn't get it to work.  But then I found this important piece of information:



6.4    URL
A Uniform Resource Locator (URL) is identified with a functional notation:

BODY { background: url(http://www.bg.com/pinkish.gif) }

The format of a URL value is 'url(' followed by optional white space followed by an optional single quote (') or double quote (") character followed by the URL itself (as defined in [11]) followed by an optional single quote (') or double quote (") character followed by optional whitespace followed by ')'. Quote characters that are not part of the URL itself must be balanced.

Parentheses, commas, whitespace characters, single quotes (') and double quotes (") appearing in a URL must be escaped with a backslash: '\(', '\)', '\,'.

Partial URLs are interpreted relative to the source of the style sheet, not relative to the document:

BODY { background: url(yellow) }

The important piece of information is the last sentence, for in my previous experimenting around where it didn't work, the URL I was using to link to the background image was relative to the web page code, not relative to the source of the style sheet.  Once I had corrected that, it worked...

So I really solved this question myself, but both of your comments led me to learn more about CSS, so I will split the points.
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

LVL 59

Author Comment

ID: 21891401
By the way, sorry to take so long to finalize this question, but I'm a big tennis fan and I hadn't found it easy to find the time to investigate this problem because I spend most of every day watching Wimbledon on ESPN2...  ;0)
LVL 11

Expert Comment

ID: 21891406
tennis and css is the same thing, so you should get on fine. thanks for the feedback
love all me thinks
LVL 44

Expert Comment

ID: 21891591
Lee -- you should be aware that putting a direct link in the webpage to a background image can cause big problems -- first, it radically slows down how quick your pages load.  Second, if the web page that has the background is down, your own site will seize cold, waiting for a downed site.  Third, people change their sites from month to month, almost all links like that become obsolete in a year.

I encourage you to do this -- (1) if you can download the BG and use it free, do that with all you need and remove all hot links to other websites.  If you can't find a different background to use.
(2).  Do not have any embedded links in your pages where your own page loading depends on them, it will bite you.  The only links to outside sites (including "partner" sites), should be as a clickable link.  So only the loading of the other page is affected, not your own.
LVL 59

Author Comment

ID: 21891614
The background images were ones I downloaded (and they were free) and I put them in a folder I called backgrounds which is on the site.  So there is no dependency on other people's pages...

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

618 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question