CSS Background URL

Question

Can someone help explain how exactly the CSS URL for a background image works? How exactly does the CSS know where to start looking up the URL? for example I have these 3 URLs

Answer 1

You haven't given us enough information to give a direct answer to the question, so the best way I can think of to answer is to show you how to find the solution for yourself.

In any modern web browser, you can press F12 to bring up the dev tools window. Load the page with this window open.

Depending on which browser you're using, the exact dev tools features will differ, but they all provide the ability to see the network traffic that is happening within the browser. This will be on a tab page within the dev tools.

Find that network traffic tab, and you will see an entry for your page being loaded, along with entries for all the CSS, JS, images, and other resources.

This will show you the exact URL that the browser attempted to load. It will also show you any errors that occurred (eg a 404 Not found error).

Using this, you should be able to work out where the browser is looking for the files in each of the instances you described, and it should be fairly obvious from there how they differ and why it is working in some cases and not others.

I hope that helps.