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
  • 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.
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.

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

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Suggested Courses

850 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