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?

the first two are related to the URL of the page, which you haven't told us -- is it also on localhost:1234 or are you accessing it via a file URL or something else? Was it the same URL across all three PCs? — Spudley
– Spudley, Commented Jul 23, 2013 at 11:36
Not clear that if you tested on each PC locally, or each PC accessing some host. — DontVoteMeDown
– DontVoteMeDown, Commented Jul 23, 2013 at 11:36

Mohammad Areeb Siddiqui · Accepted Answer · 2013-07-23 11:45:49Z

12

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.

edited Jul 23, 2013 at 11:45

answered Jul 23, 2013 at 11:38

Mohammad Areeb Siddiqui

10.2k16 gold badges74 silver badges118 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

5tar-Kaster Over a year ago

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

5tar-Kaster Over a year ago

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?

Spudley · Accepted Answer · 2013-07-23 11:40:51Z

0

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.

answered Jul 23, 2013 at 11:40

Spudley

169k39 gold badges240 silver badges309 bronze badges

1 Comment

Mohammad Areeb Siddiqui Over a year ago

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.

Collectives™ on Stack Overflow

CSS Background URL

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related