[RESOLVED] PNG background-image url doesn't show in firefox

**tr333** · Sep 5th, 2011, 08:49 PM

I can't get the blue background image to show in Firefox; it just shows the red border without the blue rectangle image inside it. It's showing correctly in Chrome/IE/Opera. Firefox has no problems showing the background image when I run from a local file (file://) but has problems when I view from Apache or IIS webserver. Can anyone explain what might be going wrong? There is also no problems when the background image url is switched to placehold.it png image.

HTML Code:

<!doctype html>
<html>
<head>
<title>Test</title>
<meta charset="utf-8"/>
<style type="text/css">
body > div {
    /*background-image: url('http://placehold.it/800x150.png');*/
    background-image: url('test-800x150.png');
    background-repeat: no-repeat;
    min-height:300px;
    width: 1000px;
    border: 1px solid red;
}
</style>
</head>
<body>
<div>
    test
</div>
</body>
</html>

**kows** · Sep 5th, 2011, 09:56 PM

Make sure the path is correct? A relative path like that means that test-800x150.png has to be in the same directory as the HTML file you're opening.

If this exact code is not working and the file is in the same directory as the HTML file, then I'm not sure what to tell you.

**tr333** · Sep 5th, 2011, 10:16 PM

I renamed the file from 'test-800x150.png' to 'test.png' and it's now working. I can't explain it, because I've used the same layout on another site with a background-image url and that didn't have problems.

**Nightwalker83** · Sep 5th, 2011, 11:46 PM

Originally Posted by tr333

I renamed the file from 'test-800x150.png' to 'test.png' and it's now working. I can't explain it, because I've used the same layout on another site with a background-image url and that didn't have problems.

Maybe firefox can not read file names when they are long an a certain length, if I remember correctly the value is 8.3 which is a maximum of eight characters before the "." after three after before problems start to occur.

**tr333** · Sep 5th, 2011, 11:58 PM

Originally Posted by Nightwalker83

Maybe firefox can not read file names when they are long an a certain length, if I remember correctly the value is 8.3 which is a maximum of eight characters before the "." after three after before problems start to occur.

8.3 filename limitations haven't existed for years, so I would be surprised if that caused any issues.

**Nightwalker83** · Sep 6th, 2011, 12:57 AM

Maybe so but to make sure nothing goes wrong it is best to keep to that format. Like Occam's Razor suggests the simplest solution is usually the best.

**kows** · Sep 6th, 2011, 09:31 AM

Originally Posted by Nightwalker83

Maybe so but to make sure nothing goes wrong it is best to keep to that format. Like Occam's Razor suggests the simplest solution is usually the best.

Usually, that might be reasonable, but this was a limit made by the operating system, not a browser, and it was pre-Windows 95. That was 16 years ago. This limitation does not exist anymore.

Thread: [RESOLVED] PNG background-image url doesn't show in firefox

Thread Tools

Display

[RESOLVED] PNG background-image url doesn't show in firefox

Re: PNG background-image url doesn't show in firefox

Re: PNG background-image url doesn't show in firefox

Re: PNG background-image url doesn't show in firefox

Re: PNG background-image url doesn't show in firefox

Re: [RESOLVED] PNG background-image url doesn't show in firefox

Re: [RESOLVED] PNG background-image url doesn't show in firefox

Posting Permissions