Grow your CSS skills. Land your dream job.

Quick Reminder About File Paths

Published by Chris Coyier

Whenever I have a problem with an image "not showing up" on a web page, the first thing I do is take a close look at the file path that references that image. If that file path is relative (meaning that it doesn't start with http://), I pay extra close attention to the relationship of where the file is that is referencing the image, and where that image actually is.

  • Is the image in the same directory as the file referencing it?
  • Is the image in a directory below?
  • Is the image in a directory above?

By "below" and "above", I mean subdirectories and parent directories. Relative file paths give us a way to travel in both directions. Take a look at my primitive example:

file-path-example1.jpg

Here is all you need to know about relative file paths:

  • Starting with "/" returns to the root directory and starts there
  • Starting with "../" moves one directory backwards and starts there
  • Starting with "../../" moves two directories backwards and starts there (and so on...)
  • To move forward, just start with the first subdirectory and keep moving forward

Comments

  1. This is a good reminder post for people. As a lazy programmer, I always put images in the “grapics” folder at the root level and use absolute (“/”) paths. Much easier for me.

  2. Permalink to comment#

    thanks. ı prefer to keep css file on root, yeah im a lazy boy too :)

  3. Permalink to comment#

    There’s also a weird truth about linking to filter and behavior files in Internet Explorer. Every file has to be linked as though it was referred from HTML file. It may sound crazy, but consider this:

    example-ie6.css:
    body {
    filter: (…)AlphaImageLoader(src="images/body-bg.png", sizingMethod="scale");
    }

    This won’t work if you have HTML files elsewhere. In your case you should write:

    body {
    filter: (…)AlphaImageLoader(src="assets/CSS/images/body-bg.png", sizingMethod="scale");
    }

    If you don’t know how to construct unique path, use /assets/CSS/images/body-bg.png, where / means root of your server.

    These gimmicks are necessary only in IE, only for filter and behavior (plus references in expression()). It’s helpful to remember it next time we want to emulate semitransparent logo in your site. :)

    PS: Great blog, keep it up. But it would be very helpful if you made a difference between code and pre. My comment will be much nicer to read when you do that. Thanks.

  4. niksy
    Permalink to comment#

    Nice, thanks!

  5. //website.com/images/image.gif” uses the protocol of a current page. This works fine if you are using absolute paths, so your path could be “http://website.com/images/image.gif”, “https://website.com/images/image.gif” or something else.

    and one more “./” uses the current directory.

  6. I am probably the laziest coder by usually putting all the images in the same folder as the html files, I now use a graphics folder.

    slightly off topic but if this tip does not work and the images are still not showing up, it can be that they are not saved right in photoshop and are ‘Index format’.

    Good article, I alwasy get caught with this :D

  7. Permalink to comment#

    Thank you for your idea, but i prefer my css-folder as root, too.

    Ralph

  8. Great reminder. Sometimes we do so much, when there’s a problem, we tend to think it has to do with something more in-depth and less complicated then the mere file path.

  9. yaser
    Permalink to comment#

    Great reminder, thanks Chris!

  10. Norma

    Oh my! The simplest of issues are always the biggest problems … Thank you for this post!

  11. Bill Byrd

    In paths article, says privative rather than primative. Figgered you’d wanna know.

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".