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
#web_content{ background: URL(images/background.jpg); }
#web_content{ background: URL(/images/background.jpg); }
#web_content{ background: URL(localhost:1234/newWebSite/images/background.jpg); }
I tried all 3 of these on different PCs. Using the same web browser that are the same versions and everything. Basically all that was different was the PC it ran on. Using the 1st example it showed only on one PC, the 2nd example showed on 2 PCs and the 3rd one showed on all of them... but of course in real life using that as the URL won't work. Can someone explain in detail how the URL finds the file?
The first one says to look for a image folder in the same directory in which the CSS file is located and then point out the background.jpg file.
The second one says to go into the root folder then look for an image folder and then look for a file named background.jpg.
The third one says to go to a domain then look into newWebSite folder then in an image folder then point out the file background.jpg.
It totally depends on the structure of your directories that what URL to use and when. If your CSS and Image folders are in the same directory then you may write the URL like this:
background-image: url(../images/background.jpg);
The ../ here will tell CSS file to go back one directory and then go into the image folder.
If your image folder is a subdirectory of the css folder then you may write like this:
background-image: url(images/background.jpg);
If you want to include a file from another website then you may write like this:
background-image: url(http://www.example.com/background.jpg);
If you want to locate a folder that is in your root directory of your website then you may write like this:
background-image: url(/images/background.jpg);
The / at the first here indicates the URL to go into the very first parent directory and then look for an image folder.
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.
