5

I'm running into a problem with background image of an <li> loading in firefox.

my original code was:

background: #bdcad7 url(../images/navbg.png) repeat-x;

which works well in chrome and IE but not in FF.

background: #bdcad7 url(images/navbg.png) repeat-x;

also works in IE and chrome but not in FF

The only way to get it working in FF is if I include the next directory level

background: #bdcad7 url(/includes/images/navbg.png) repeat-x;

but that doesn't work in other browsers.

I've tried all variations I can think of ./, ../, include quotes, double quotes, use background-image etc and can't get it to work in all browsers. The relative path just seems to read different in FF (something I've never seen before)

What works in all browsers is having the full url of the image or an absolute path, but eachtake 3 lines on the text editor so I'd like to avoid it if possible.

Any insight as to why firefox is giving me a hard time would be appreciated.

Ionko Gueorguiev
  • 302
  • 4
  • 18
  • 3
    Show the directory structure of css and images directory. The path is relative to the CSS file, not the HTML file http://stackoverflow.com/questions/940451/using-relative-url-in-css-file-what-location-is-it-relative-to – Ruan Mendes Nov 16 '12 at 20:02
  • How do you load the stylesheet? Does it get redirected at any point? – Boris Zbarsky Nov 16 '12 at 20:29

5 Answers5

2

I appreciate all the input. To the best of my abilities I figured it's a problem coming somewhere on the server side along the directory path.

I've doubled and triple checked the css, tried every variation possible and can't duplicate the error on a test document.

I think the only option is to go for the full absolute path in case someone else runs into the same problem.

background:#F1F1F4 url(/dir1/dir2/dir3/dir4/includes/style/images/background.png) top left repeat-x;
Ionko Gueorguiev
  • 302
  • 4
  • 18
1

The correct syntax would be

background: #bdcad7 url(../images/navbg.png) repeat-x right top

So you may have to add the last 2 arguments for it to work.
It would help a lot if you gave us the site structure.

SeinopSys
  • 8,787
  • 10
  • 62
  • 110
  • background position didn't help either. Going through firebig the image doesn't load. I've never had this problem before with relative paths and I'm just stumped. It's an internal application and unfortunately I can't share a link. – Ionko Gueorguiev Nov 16 '12 at 20:22
  • Link and site structure are 2 different things. – SeinopSys Nov 16 '12 at 20:30
0

Make sure the div containing the background has some height to it. Also, make sure the image filename is relative to the path of the CSS file.

More possible solutions can be found here - Background image is not displayed in Firefox

Community
  • 1
  • 1
Trey Copeland
  • 3,387
  • 7
  • 29
  • 46
  • background position didn't help either. Going through firebig the image doesn't load. I've never had this problem before with relative paths and I'm just stumped. It's an internal application and unfortunately I can't share a link but the structure is pretty basic. It's a standalone app with just
    • link 1
    • link 1
     – Ionko Gueorguiev Nov 16 '12 at 20:34
  • `class"menu"` is missing an = if thats the case, and `
  • ` elements describe list elements, not links.
    • – SeinopSys Nov 16 '12 at 20:47