相対パスでCSS内に画像のパスを指定する際の仕様について

Question

CSSファイルに記述されている画像を参照するパスを、「/img/hoge.png」と絶対パスで指定されているものから「../../../img/hoge.png」と相対指定に変更する必要があります）。

しかし実際のディレクトリ構成としては

├── img
│   └── hoge.png
└── css
    └── hoge1
        └── hoge.css

となっています。
hoge.cssからhoge.pngへの参照は正しくは「../../img/hoge.png」となりますが、事情があり「../../../img/hoge.png」と「../」がひとつ多い状態で記述する必要があります（事情についての説明は割愛します」。

「../」が多い分には「/img/〜」と絶対パス指定と同様の扱いになり、問題なく画像が参照できている事は確認したのですが、これはApacheの仕様でこうなっているのでしょうか？

もしこれがブラウザによるものだとすれば、機種によって画像が表示されない様な事が起こる可能性もありそうです。

どうぞ宜しくお願い致します。

Answer 1

http://localhost:8888/hoge/css/hogecss/hoge.css

このCSSに以下のように定義しました
#aaa {
background-image: url("../../img/hoge.png");
}

そしてブラウザからリクエストされたURLがこちらです
http://localhost:8888/hoge/img/hoge.png
ちゃんと画像は表示されました。

また、質問者様がおっしゃるように、../ を１つ余分につけ、CSSに以下のように定義しました
#aaa {
background-image: url("../../../img/hoge.png");
}

ブラウザからリクエストされたURLがこちらです
http://localhost:8888/img/hoge.png
このURLには画像が存在しないため、画像は表示されませんでした。

つまり
「「../」が多い分には「/img/〜」と絶対パス指定と同様の扱いになり」ということは無いと思うのですが…。

もし、絶対パス指定と同様の扱いになっているのであれば、Apacheのmod_rewriteなどを用いて
リクエストされたURLを書き換えていたりしませんでしょうか。

質問内容を勘違いしていたらすみません。
※Chromeで実験しました

Comments

[sekiyama]

あ、申し訳ございません。
説明不足でした。

確かにご提示頂いているパターンでは「/img/hoge.png」と「../../../img/hoge.png」が同様のパスとして扱われる事は無いですね。

今回自分が悩んでるパターンは、
http://localhost:8888/hoge/css/hoge.css
から
http://localhost:8888/img/hoge.png
を参照する様なパターンでして、
その場合だと正しい指定は「../../img/hoge.png」となりますが、これを「../../../img/hoge.png」と指定しても同様に画像が参照されると言う現象についてです。

これはhttp://localhost:8888/がドキュメントルートとなり、それ以上ディレクトリを遡ろうとしてもそれより上位のディレクトリが無いため、
極端な話、「../../../../../../../../img/hoge.png」と指定したとしても「/img/hoge.png」と指定した場合と同様に扱われる様で、この仕様を制御しているのが何なのかを知りたかったのです。

[sekiyama]

すみません、間違えました

誤）
確かにご提示頂いているパターンでは「/img/hoge.png」と「../../../img/hoge.png」が同様のパスとして扱われる事は無いですね。

正）
確かにご提示頂いているパターンでは「/img/hoge.png」と「../../img/hoge.png」が同様のパスとして扱われる事は無いですね。

[退会済みユーザー]

なるほど、そういうことでしたか。

画像へのURLを以下のようにして実験してみました。
#aaa {
background-image: url("../../../../../../../../../../img/hoge.png");
}

Chromeがリクエストした画像へのURLは以下ようになりました。
http://localhost:8888/img/hoge.png

よって、この挙動はブラウザが制御しているということになりますね。
※ブラウザがこのような挙動をするって初めて知りました。勉強になります。

[sekiyama]

実験ありがとうございます！

Chrome、Safari等主要なブラウザで検証しましたが、同様の挙動でした。
ひとまず問題無さそうですね。