The problem is this:

I have a div (#bottom), which is NOT floated, which has a pre-defined height in CSS (of 24px;), which USED TO display its background (bottom.png) until I put something inside.


#bottom {height: 24px; background-image: url("bottom.png");}


<div id="bottom">
<div id="somethingInside">

Now FF 3.x does not LOAD the background image! I can put another image used on the same page, within the same html file, and make CSS use it as a background image for that #bottom div and then it shows up there.

But I can't load the image in the browser EVEN if I click "show background image" in FF context menu or when I enter the bottom.png path. Instead only the path to the bottom.png file shows there... If I use a gif file than everything works fine. When I use a PNG, then it doesn't work.

If I rename the bottom.png to whatever.png, it does not load either. If I invoke bottom.png as a background anywhere else in the same file, it doesn't work.

If I remove the div#somethinginside from div#bottom, the problem persists.

It all changed after I included bottom.png into div#bottom as <img src="bottom.png" />, then the background returned, the was displayed but some other pngs I used below in the file disappeared.

This is by far the most annoying phenomena I have ever encountered, as I can't find any explanation for that. It looks as if Firefox blacklisted that file or something, stupid it may sound, though.

It's not a path issue: i have many files in the same folder. It's not a '/" in url("myUrl") in CSS issue: I copy/paste paths for files that do work. I always save via Save for web in Photoshop. The same happens, irrespective of whether I'm using PNG 8 and PNG 24 images. I'm working on a local server, XAMPP. I'm using Joomla. And Windows XP Pro. And it ONLY happens in Firefox, currently 3.5.7 for me. Not an issue in IE8.

Has anyone encountered a problem like that? I can't even reproduce it on demand since i don't even know what's causing this strange behavior. And it applies mostly to PNG files for some reason. It's the second time this happens, and it's a completely different project. Is there some PNG/Firefox bug?

  • Wow sounds like a frustrating problem. Are you able to put your png file online so we can play around with it? o.k.w over 9 years ago
  • What is the link to your website? adelacreative over 9 years ago

1 answer

Ibrahim 10
  1. I understand you've checked the path, but verify once again.
  2. Remove the background of the inner element using background:none
  3. Don't go by the extension of the image. I once saved a "PSD" image from Photoshop as "PNG" and it worked without issues locally, but not in IE and when uploaded to the server. Recheck this.
Answered over 9 years ago by Ibrahim