Location of CSS background image?

Question

I've been learning Web Design from W3schools. Recently, I started CSS. For background image, it's example is: background-image: url("Paper.gif")

My question is: Where does it even find this image? It's not like "url" is an actual URL, and Paper.gif seems to just come out of nowhere. Is it saved in the same file as the CSS file?

See this: http://stackoverflow.com/questions/940451/using-relative-url-in-css-file-what-location-is-it-relative-to — Jason, Jul 02 '14 at 18:44
Don't learn from w3schools, you're already doomed... committed the same mistake when I was a newbie, took time to recover. — kapa, Jul 03 '14 at 09:49

score 2 · Answer 1 · answered Jul 02 '14 at 18:42

Since you ONLY supplied a filename, the browser looks to load Paper.gif from the same directory which the file is served from. It's commonly referred to as a "relative path."

For example, if you load http://example.com/index.html and that page references a background-image: url(background.png), it will look for http://example.com/background.png to load.

This is, of course, assuming you're not using an external stylesheet. If so, your relative path will load from the place that the stylesheet is served from. For example, if you load http://example.com/index.html, which references http://example2.com/style.css for its styling, and that stylesheet references a file named background.png, the browser will look for a file at http://example2.com/background.png

score 0 · Answer 2 · answered Jul 02 '14 at 19:24

The example above is telling the browser the image is at the root of your website. However say if the image is like so background-image: url("images/Paper.gif") then it's telling the browser the image is in the images folder. Hope that was clear :)

Anyway... this is the best HTML & CSS book for beginners: http://www.htmlandcssbook.com/

Location of CSS background image?

2 Answers2