Background image path not working in firefox

问题:

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.

回答1:

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;

回答2:

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.

回答3:

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

回答4:

Try url('../images/navbg.png') with ' '. I do it anyway, and it doesn't seem to hurt, so maybe it will help? Worth a shot.

回答5:

background: url("../images/navbg.png") repeat-x scroll right top #BDCAD7;