-1

I want to use background-image, my code working on Chrome & Opera but isn't working on IE & Mozilla Firefox.

my code is :

background-image: url('../img/thm-default-background.png');

when i use like this :

background-image: url('./img/thm-default-background.png');

Somehow is working on ie & mozilla but this time is'nt working on chrome and opera. I don't have any idea, why is'nt working.

Image local is like that;

http://localhost/platform/web/app/img/thm-default-background.png

*ie version: 11.3, opera: 60

**Edit: Now I'm using image svg with Data Url.

Ebru Esra
  • 3
  • 3
  • does : `background-image: url('../img/thm-default-background.png' , url('./img/thm-default-background.png');` would help for a short while untill you figure out that funny behavior ? – G-cyr running IE11 Jun 26 '19 at 18:35

1 Answers1

0

The relative path with ../ and ./ means two different paths.

dot-slash (./)

Dot (.) points to the same directory and the slash (/) gives access to it. If your directory is like this:

enter image description here

The local image is in the img folder, then the background-image url in index.html should be background-image: url('./img/thm-default-background.png');. I tested it in IE11, Edge and Chrome and it works.

double-dot-slash (../)

A double dot (..) points to the upper directory and likewise, the slash (/) gives you access to it. If your directory is like this:

enter image description here

The local image and the webpage is in the same folder, then the background-image url in index.html should be background-image: url('../img/thm-default-background.png');. Also works in IE11, Edge and Chrome.

Yu Zhou
  • 11,532
  • 1
  • 8
  • 22
  • Hımm. my index.html is in the this directory; http://localhost/platform/web/app/application It's means ../img/name.png is correct right ? It should be working in ie. not just chrome. – Ebru Esra Jun 27 '19 at 07:09
  • Yes, you're right. It's weird it not work in IE, in my side it works well in all browsers. Is there any other error in your page? Have you used F12 tools in IE to see if there's any error in console? Please check it. – Yu Zhou Jun 27 '19 at 07:31
  • I checked the IE but there is no description but now I opened with the Microsoft Edge, and same Url path go to the directly ; http://localhost/platform/web/img/thm-default-background.png. Same code, same url path... chrome goes to http://localhost/platform/web/app/img/thm-default-background.png (correct directory). How can this happen ? – Ebru Esra Jun 27 '19 at 08:10
  • Have you tried to clear cache of IE? If it not work, using the absolute path instead of the relative path. You can refer to [this similar thread](https://stackoverflow.com/questions/13423510/background-image-path-not-working-in-firefox). – Yu Zhou Jun 27 '19 at 09:08