Can't find resource from css

Question

I can't find solution to load image linked in css. Chrome inspector shows me message:

404 (not found)

and shows me this link: http://127.0.0.1:5500/components/css/img.png

even if I have in my css

background-image: url(../src/splash_1/img.png) 

Could anyone please help me with appropriate linking... I can't find answer how to correctly link that image in that folder structure.

UPDATE: Below in the second picture attached, I added print screen with real data from Chrome Inspector and code and the element. Maybe that will be more helpful. I want to link correctly

ccbackground.jpg

Thank you!

Answer 1

Eventually it turned out I had 2 pairs of the same css files in different location. One pair in correct location and the other in main folder. I was changing css files in editor located in main folder, but in index.html css files were linked to specified folder. So even I changed css it didn't reflect changes in index.html, because the changes were done in the same name css files but in other location. I wonder how it happened I had 2 pairs of css files in different location, this is something really unclear for me. Thank you All for your help and your time.

Answer 2

Please try below code...

background-image: url('components/src/splash_1/img.png');

Answer 3

You just need to pass the path as a string in single quotes with the same path you tried first. The .. is needed to step one folder up from the css folder.

background-image: url('../src/splash_1/img.png');

Note: it can be that the path is cached locally on the client side, you may need to clear browser cache to make it work.

Answer 4

Try this

background-image: url('/src/splash_1/img.png');