• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 4687
  • Last Modified:

How to display table cell background images in IE

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!
  • 3
  • 2
  • 2
2 Solutions
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

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; }
LeeTutorretiredAuthor Commented:
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.
Cloud Class® Course: SQL Server Core 2016

This course will introduce you to SQL Server Core 2016, as well as teach you about SSMS, data tools, installation, server configuration, using Management Studio, and writing and executing queries.

LeeTutorretiredAuthor Commented:
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)
tennis and css is the same thing, so you should get on fine. thanks for the feedback
love all me thinks
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.
LeeTutorretiredAuthor Commented:
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...
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Introducing Cloud Class® training courses

Tech changes fast. You can learn faster. That’s why we’re bringing professional training courses to Experts Exchange. With a subscription, you can access all the Cloud Class® courses to expand your education, prep for certifications, and get top-notch instructions.

  • 3
  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now