外部CSSの中で画像パスを指定する時の注意

かなり初歩的なことですが、少しはまってしまったのでメモ。

以下のようにファイルが配置されているケースで、

/sample
  /img/iPad2.jpg
  /css/sample.css
  sample.html

外部CSS（sample.css）から、画像（iPad2.jpg）を参照する場合、以下の書き方では参照できません。

background: url(./img/iPad2.jpg)

上記の書き方では、参照先が「/sample/css/img/iPad2.jpg」になってしまうからです。外部CSS（sample.css）から見た相対パスなのでそうなります。

ですので、以下のように、「../」として、「1つ上の階層のimgディレクトリ」という指定にする必要があります。

background: url(../img/iPad2.jpg)

画像は（httpから始まる）絶対URLで指定したほうがいいかな。