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

#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?

Solution

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.

Comments

[5tar-Kaster]

This is exactly the answer I was looking for. Thank you so much.

[5tar-Kaster]

just curious and slightly off topic but is this also the case for all the URLs used in web developing? things like javascript src URL and CSS links?

[Mohammad Areeb Siddiqui]

This was actually a nice answer, if he had been more clear and said, look for an error in the console and correct your URI. That's what I do but we just should know the pattern of writing URLs.