Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Selina Haynes
4,392 PointsUnderstanding File Paths (relative vs absolute??)
I've read the tutorial page on file paths thats been recommended a lot in the forum, but I'm still constantly having trouble with them. For example, when I was trying to get the background image to load in the "build a simple website" section, I had
"url('../Pictures/websitewaters-island01-stage03/css/img/bg-texture.jpg')"
as my file path, and the background wouldn't load. But when I changed it to an absolute file path (I think?) as below, it worked:
"url('/Users/shanes/Pictures/websitewaters-island01-stage03/css/img/bg-texture.jpg')"
Aren't they the same file path? Why does one work and the other doesn't? To add to my confusion, in my index.html file the opposite is true, that is, the first example works and the second doesn't. Can anyone explain this for me (in as simple terms as possible, I'm not fluent in the computer lingo yet...)?
2 Answers
Shawn Denham
Python Development Techdegree Student 17,801 PointsHere is a great and fairly short read on it
http://www.coffeecup.com/help/articles/absolute-vs-relative-pathslinks/
now lets assume the following example:
I have a folder structure set up like this.
MySite
|_index.html
|_contact
|_contactform.html
|_imgs
|_pretty-picture.jpg
|_another-pretty-picture.jpg
|_css
|_mycss.css
If I am working in index.html and I needed to link to pretty-picture.jpg the paths I could use would be
relative: <a href="/imgs/pretty-picture.jpg">My Pretty Picture</a> this is saying - in this directory goto the imgs folder and find pretty-picture.jpg.
absolute: <a href="/MySite/imgs/pretty-picture.jpg">My Pretty Picture</a> this is saying - go back to the root and find the folder MySite then in MySite find a folder named imgs then find pretty-pictures.jpg.
Now if I am working in contactform.html and I need to link to pretty-picture.jpg we would see the following:
relative: <a href="../imgs/pretty-picture.jpg">My Pretty Picture</a> this is saying - go up one level to the MySite directory then find the folder imgs and find pretty-pictures.jpg
absolute: <a href="/MySite/imgs/pretty-picture.jpg">My Pretty Picture</a> this is saying - go back to the root and find the folder MySite then in MySite find a folder named imgs then find pretty-pictures.jpg.
As you can see the absolute path for the pretty-picture.jpg is the same for index.html and contactform.html. since we are telling it exactly where to find the .jpg file from the root of the file system.
The relative paths are set relative to the index.html and contactform.html files. index.html is in the same folder as the img folder so relatively speaking we say "from me (index.html) go right there to the img folder and grab pretty-picture.jpg".
Contactform.html is sitting in the contact folder so relatively speaking we say " from me (contactform.html) go up one level (the ... signifies to go up one level) then goto the ing folder and grab pretty-picture.jpg.
To sum it up: a relative path is the path to the asset from the current file you are in. An absolute path is the path to the asset from the root of file system.
I hope this didn't confuse you more :)
Selina Haynes
4,392 PointsThank you! The article was really helpful, I think I understand it now :)