When linking to a resource URL to, say, a background image, when do you use no slash, like:
background-image: url(images/myImage.png);
When do you use a slash, like:
background-image: url(/images/myImage.png);
When do you use one dot and a slash, like:
background-image: url(./images/myImage.png);
And when do you use 2 dots and a slash, like:
background-image: url(…/images/myImage.png);
Here is a good explanation for HTML. The same applies to CSS, just remember that it uses the directory the CSS file lives in as the reference.
To extend this ´url(‘…/…/images/image.jpg’)´ will go up two folders, then into that folder’s ´images´ folder, then find image.jpg.
Thank you, but what about the single dot slash ./ ?
Hi, there!
path/to/file and ./path/to/file are both relative paths used to access files within the directory you are currently working in. In terms of usage, I am tattling on myself because I use path/to/file more than ./path/to/file … BUT you should use ./path/to/file to limit confusion.
../path/to/file is used to access the directory above the directory you are currently working in. So, let’s say your folder tree (directory) looks something like this:
v project_folder
|
|v resources
|v images
|image.png
|v css
|styles.css
|index.html
And this is how you would link to image.png
../images/image.png
../ takes you from the css directory into the resources directory to which then images/image.png links you to the image
Does that make sense?
Thanks for the reply! Makes sense. So how would you Link from the index.html to the image.png?
Looking at the example tree above, we know that index.html and resources are within the same directory: project_folder
Because of this, you will use a relative path—
./resources/images/image.png
Thank you so much. Best explanation I’ve seen.
You need to start a new topic for your question. This one is for dots and slashes in linking.
