CODEWITHSUNDEEP
cssurldirectory
B T
B T

Reputation: 61023

Why am I having issues with starting a css relative url with a previous directory

I'm loading a background-image with a url like this:

background-image: url(../../images/folder/imageName.png);

For certain pages, this works fine, but on others, it only works if I put a slash at the front like this:

background-image: url(/../../images/folder/imageName.png);

Its bizarre to me that this would work sometimes and not others. Also, my gut feeling is telling me that starting these urls with a slash is just plain wrong.

Does anyone have any insight on this?

Upvotes: 0

Views: 265

Answers (2)

B T
B T

Reputation: 61023

I think I figured it out. My stylesheet is at an address like this:

 http://localhost/rootDirectory//pageName/stylesheet.css

Note the two slashes between rootDirectory and pageName. It seems that when my images used the .. to go back directories, it treated the empty space between those slashes as a directory itself (while loading the stylesheet did not treat it as its own directory and had no affect on the path loaded).

So this is why for some stylesheets, ../../ seemd to work, and for others it didn't (as a matter of fact, ../../../ worked instead)

Upvotes: 0

Steve H
Steve H

Reputation: 966

Starting urls without a protocol (http://, etc) means it is relative to the current document. If the different pages are in different folders then the file that relative URL points to will change, which is probably your problem.

Starting a URL with a slash makes it relative to the entire domain/subdomain the page is on. I consider this a good practice so would encourage you to use it.

In your example however you are following it with ../../, which are "directory above" hints, which are ignored because you are already at the base of the domain.

Upvotes: 2

Related Questions