html - Failed to load resource: the server responded with a status of 404 (Not Found) error in server

Question

I'm trying to load up image in my Image Folder, but it's not working.

Upon debugging, I see this error:

Failed to load resource: the server responded with a status of 404 (Not Found)     

My image coding is in .css file that is,

background: url("../Images/bgbody.png") no-repeat;    

What am I doing wrong here?

Answer 1

Use your browser's network inspector (F12) to see when the browser is requesting the bgbody.png image and what absolute path it's using and why the server is returning a 404 response.

...assuming that bgbody.png actually exists :)

Is your CSS in a stylesheet file or in a <style> block in a page? If it's in a stylesheet then the relative path must be relative to the CSS stylesheet (not the document that references it). If it's in a page then it must be relative to the current resource path. If you're using non-filesystem-based resource paths (i.e. using URL rewriting or URL routing) then this will cause problems and it's best to always use absolute paths.

Going by your relative path it looks like you store your images separately from your stylesheets. I don't think this is a good idea - I support storing images and other resources, like fonts, in the same directory as the stylesheet itself, as it simplifies paths and is also a more logical filesystem arrangement.