Grow your CSS skills. Land your dream job.

Absolute VS. Relative File Paths

  • # February 8, 2013 at 12:49 pm

    Currently, my HTML uses absolute file paths because I can not seem to get the hang of relative file paths. For instance, on my Contact page, I use absolute file paths for all of the images, which looks like this:

    How do I make a relative file path that is a bit more manageable. I know that you can do things like images/, ./images/, or ../images/, but I am a bit confused on which one I should use, because I tried them all and none of them seem to work. In my CSS, I can use relative file paths just fine:

    header {
    background-image: url(images/header-rainbow.png);
    }

    But it does not seem to be that easy in HTML. Any help would be greatly appreciated. Thank you.

    # February 8, 2013 at 1:22 pm

    `src=”/image.jpg”` == the root folder of the website

    `src=”image.jpg”` == same folder as current page

    `src=”../image.jpg”` == one folder up from current page

    `src=”../../image.jpg”` == two folders up from current page, etc

    In your first example, you could do two different things:

    Or,

    # February 8, 2013 at 1:31 pm

    Also. Instead of saying ../images you can often simply say /images. That mean start at the root.

    # February 8, 2013 at 1:53 pm

    Thank you muchly, kind sirs. @TheDoc, thanks for explaining the different steps for img src.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

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