CODEWITHSUNDEEP
cssimagefirefoxbackgroundbackground-image
Ionko Gueorguiev
Ionko Gueorguiev

Reputation: 312

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.

Upvotes: 5

Views: 5220

Answers (5)

Ionko Gueorguiev
Ionko Gueorguiev

Reputation: 312

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;

Upvotes: 2

Nandhakumar
Nandhakumar

Reputation: 376

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

Upvotes: 0

Calebmer
Calebmer

Reputation: 2860

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.

Upvotes: 0

SeinopSys
SeinopSys

Reputation: 8937

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.

Upvotes: 1

Trey Copeland
Trey Copeland

Reputation: 3527

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

Upvotes: 0

Related Questions