When do you use dots and/or slashes when linking?

[duanewatson]

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);

[jameskeezer]

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.

HTML File Paths

To extend this ´url(‘…/…/images/image.jpg’)´ will go up two folders, then into that folder’s ´images´ folder, then find image.jpg.

[duanewatson]

Thank you, but what about the single dot slash ./ ?

[kirativewd]

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?

[duanewatson]

Thanks for the reply! Makes sense. So how would you Link from the index.html to the image.png?

[kirativewd]

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

[duanewatson]

Thank you so much. Best explanation I’ve seen.

[donsufi]

guys could you pls help me with this,i’m stuck

[duanewatson]

You need to start a new topic for your question. This one is for dots and slashes in linking.