# Solved: CSS Background Image Displaying In Internet Explorer But Not Firefox



## TW.87

G'day,

Is there a particular trick with getting a CSS background image working in both Internet Explorer and Firefox? I currently have it working without a problem in Internet Explorer, but it just won't display in Firefox.

If you go here, you will see a section with the heading "2008 Series". Just below, in a table, there are backround image gradients that appear in Internet Explorer (behind the text) but not in Firefox. Can someone tell me what I need to do to get this working in both browsers?

Any help here would be greatly appreciated!


----------



## haswalt

First thing to do is fix these errors:

http://validator.w3.org/check?uri=h...(detect+automatically)&doctype=Inline&group=0

Then perhaps use a proper stylesheet rather than inline styles? may help things make more sense.

Harry


----------



## deepdiver01

Renders the same in ff2 for me.

Maybe you've got it fixed.

(Go Garth)


----------



## TW.87

haswalt said:


> First thing to do is fix these errors:
> 
> http://validator.w3.org/check?uri=h...(detect+automatically)&doctype=Inline&group=0
> 
> Then perhaps use a proper stylesheet rather than inline styles? may help things make more sense.
> 
> Harry


Thanks for the response.

I've done as you suggested and corrected all of the errors, but still no luck. Do you have any other ideas?


----------



## haswalt

WEll nect i'd want to know why all your links have "()" in them and why you have used 10 different images when you could have used 1?

Harry


----------



## haswalt

i made a temporary version on my server, and it works in all browsers. heres ther changes i made:

Removed dodgy characters from filenames and urls: "table-back.png" background-image:url(../images/table-back.png);

Then i created styles for each td:



Code:


.ffBack {
	background:url(../images/table-back.png);
	height:18px;
	width:40px;
}

Then i removed all those in line style declarations and added:



Code:


 class="ffBack"

Harry


----------



## TW.87

Thank you for your replies!

I am using multiple images for the gradient because I need to. If you look at the gradient in its entirety, you will see that each one is actually different as to encompass the radius of the gradient.

As for the changes to the file-names, I appreciate your advice, but it's not creating a problem with the other background images on the website (in either browser), so I don't believe it to be that.


----------



## tomdkat

Can you post a screenshot of how the page looks for you? I'm not seeing any background image in any of the browsers I've tried.

Peace...


----------



## TW.87

I've attached a screen-shot of what I'm seeing - as you can see, the background image is not displaying.

It wouldn't have anything to do with the fact that I'm running Mozilla Firefox 3 Beta 5, would it?


----------



## tomdkat

That looks just like what I see in Firefox 3b5 and the other browsers I mentioned above. Looks like deepdiver01 and I are seeing the same behavior.

Peace...


----------



## TW.87

I've attached a screen-shot of what I'm seeing in Internet Explorer.

Does Firefox not support inline styles for background images? Is that essentially what the problem is?


----------



## tomdkat

TW.87 said:


> Does Firefox not support inline styles for background images? Is that essentially what the problem is?


Nope, it's nothing like that. Attached is a screenshot of this test case rendered in Mozilla Seamonkey (which uses the same Gecko rendering engine as Mozilla Firefox):



Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
  <title>Table background</title>
</head>
<body>
<table style="width: 50%; height: 500px; text-align: left; margin-left: auto; margin-right: auto;" border="1" cellpadding="2" cellspacing="2">
  <tbody>
    <tr>
      <td style="background-image: url(file:///home/tom/wallpaper/cars/ferrari_wp-2.jpg); background-position: center;"></td>

      <td style="background-image: url(file:///home/tom/wallpaper/beach/beach021kd.jpg); background-position: center;"></td>
    </tr>
  </tbody>
</table>
<br>
</body>
</html>

I think the issue is with your background image files. The screenshot you JUST posted of what you see in IE looks EXACTLY like what I posted above for what I see in Firefox, at least for the 2008 rankings section. No gradient appears in the table background.

From what I can tell, these images are being used as the table background:

http://2008.rickkelly.com.au/[Global]/Global(Images)/Global(Image0030).png
http://2008.rickkelly.com.au/[Global]/Global(Images)/Global(Image0031).png
http://2008.rickkelly.com.au/[Global]/Global(Images)/Global(Image0032).png
http://2008.rickkelly.com.au/[Global]/Global(Images)/Global(Image0033).png
http://2008.rickkelly.com.au/[Global]/Global(Images)/Global(Image0034).png
http://2008.rickkelly.com.au/[Global]/Global(Images)/Global(Image0035).png

Are those images appearing as some kind of gradient for anyone else? They appear as black blocks for me.

I think the issue is with the images being used, not the browsers.

Peace...


----------



## TW.87

The screen-shot I just posted shows the background-images displaying properly, though? The images that are being used are displaying without a problem in Internet Explorer 7 (you can see the background gradient [black to grey] appear behind every second name in the table).

I don't know what could be wrong with the images, because, as I mentioned, they're displaying in Internet Explorer 7 without a problem.


----------



## tomdkat

TW.87 said:


> The screen-shot I just posted shows the background-images displaying properly, though?


Not on any of the systems I'm using. If you can, change the color of the gradient to something with greater contrast (like white) and then post a screenshot or even update the site. I even viewed your site in a machine I have running IE7 and it displayed on that machine the same way it is in Firefox, nothing appears behind the text. The individual images that you're using for the gradient I've loaded individually and they appear as black blocks.



> The images that are being used are displaying without a problem in Internet Explorer 7 (you can see the background gradient [black to grey] appear behind every second name in the table).


I'll load the individual images on my IE7 system and see how they look. In the meantime, try using images with greater contrast as a test.



> I don't know what could be wrong with the images, because, as I mentioned, they're displaying in Internet Explorer 7 without a problem.


Not on my system which is running IE7. I could post a screenshot of that, if you like. 

Peace...


----------



## tomdkat

Ok, attached is a screenshot of how your site looks as of 10 minutes ago in true-blue IE7 running on a Windows XP Home Edition I have at home. That is your "live" site. Is that NOT what you see when you view your "live" site? I guess it isn't.

What do others running IE7 see? Do you see what TW.87 is seeing or do you see what I see? (Not like the song... )

Peace...


----------



## TW.87

The screen-shot you just posted does show the background images. You can see them appearing behind the names 'Lee Holdsworth, 'Jamie Whincup', et cetera, below the '2008 Series' title.

Those background images, though, are not showing up in Firefox.


----------



## tomdkat

I don't see a thing in IE7 at all. What kind of monitor are you viewing the page on?

Peace...


----------



## TW.87

I've got two different monitors that I can see it on. One of them is a laptop screen and the other is a widescreen monitor.

Should I change the colour of the images to make it easier for you to see?

This is proving to be quite a challenge!


----------



## tomdkat

Your laptop is probably using a LCD screen. Is your desktop monitor a LCD screen as well? Yes, if you can change the color to be something of higher contrast. If the image is brighter, we can also see what Firefox and Opera (the other browser I've been testing with) are doing with it.

Peace...


----------



## TW.87

Okay, done. You should now see a brigher background-image. I've also attached a screen-shot.


----------



## tomdkat

Perfect! Thanks! I know what's going on.  It's the file names of the background gradient images. You can set them back to what they were originally.

Since you're using inline styling, the parentheses in the file names is causing some grief since the URL of the background image is *also* in parentheses. This also trips up Opera and will probably trip up Safari as well. I don't think IE6 displayed the background for me or not and I'll give it a try when I'm at work (now that I can see what's going on ).

I'm not enough of a CSS expert to determine if IE7 displaying the background image (where the other browsers don't) is a good thing or a bad thing.

The way I think you fix it is to put back slashes before the parens to "escape" them. That will tell the CSS parser to ignore the parens and they will be preserved as part of the file name. I bet if you look at the error log for the web server hosting your site, you will see a TON of "file not found" messages for the background gradient images. 

Here is an example of how you "escape" the parens in the file name:

original:
[TD]672[/TD]

becomes:
[TD]672[/TD]

Give that a try and see what that does. Let me know if that breaks IE7 for you.

Peace...


----------



## TW.87

You, sir, are a genius! That did the trick pefectly! Thank you so, so much for all of your help.


----------



## tomdkat

Glad that worked! 

Now, get those brackets and parens out of your URLs to keep them simple! 

Peace...


----------



## tomdkat

haswalt said:


> WEll nect i'd want to know why all your links have "()" in them and why you have used 10 different images when you could have used 1?
> 
> Harry


I agree, why have the unusual characters in the URLs?

Peace...


----------



## TW.87

That's just the way I like to arrange my files and development process. It doesn't cause any problems (or so it would seem), and I find it easier to work with.


----------

