The .png background does not appear in Chrome and Firefox.

Question

I need to miss something completely obvious here, but can't find anything on the net to tell me otherwise.

I am trying to pull .png into a page using:

background:url(img/runner1.png) no-repeat; 

I know the path is correct, because doing the same with jpg works:

 background:url(img/header.jpg) no-repeat; 

It seems to work in Safari, but not in Chrome or Firefox.

Did I miss something?

---

EDIT - I use:

 #runner1{ background:url(img/runner1.png) no-repeat; float: left; border: 1px solid #FFF; width: 195px; height: 205px; } 

for the following item:

 <div id="runner1"></div> 

The page runs only locally from my desktop (therefore, the server is not involved).

As mentioned earlier, paths are not a problem because jpg from the same directory works.

Firebug says:

 runner1.png GET Success image/png index.html:201 0B 8ms 

But I do not see the view or answer in Firebug.

Also direct access to the file returns the same result.

Answer 1

Solved!

It would seem that saving PNG with Photoshop creates a PNG that is incompatible with chrome or firefox. So instead, I opened the file with Fireworks, overwritten and pngs work.

Answer 2

I Assume You Are Missing. Try using an absolute url.