CODEWITHSUNDEEP
htmlcssfirefoxgoogle-chromepng
user1076082
user1076082

Reputation: 261

Background .png not showing in Chrome and Firefox

I must be missing something completely obvious here, but can't find anything online to tell me otherwise.

I'm trying to pull a .png into a page using:

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

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

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

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

Am I missing something here?

EDIT - I am using:

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

for the following element:

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

The page is just running locally from my desktop (so no server involved).

As mentioned previously the paths aren't the problem because a jpg from the same directory works.

Firebug says:

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

But I can't see the preview or response in Firebug.

Also accessing the file directly returns the same result.

Upvotes: 6

Views: 11575

Answers (3)

greenb
greenb

Reputation: 111

I had the same problem with .png files saved from IrfanView: they would not be displayed as a background image before I unchecked the "Save Transparent Color" option in PNG save options. So I guess PNG should be saved without transparent colors to be displayed as background images.

Upvotes: 0

user1076082
user1076082

Reputation: 261

Solved!

It would appear that saving PNGs with Photoshop creates a PNG which isn't compatible with chrome or firefox. So instead, I opened the file with Fireworks, re-saved and the pngs are working.

Upvotes: 5

Michael Krelin - hacker
Michael Krelin - hacker

Reputation: 143091

My guess is that you're missing /. Try absolute url path.

Upvotes: 0

Related Questions