CSSでの画像指定について。

質問

CSSでの画像指定について。

ファイルパスの指定について教えてください。

フォルダ１の中に「sample.html」、「sample.css」、「img」フォルダが入っており、
「img」フォルダの中に、「nature_01.gif」が入っています（下図）。

--------------------------------------------------------------------------

フォルダ１
L sample.html
L sample.css
L img（フォルダ）

　img(フォルダ)
　L nature_01.gif

----------------------------------------------------------------------------
このファイル構成だと、sample.css の中で

『background-image:url(/img/nature_01.gif)』のようにパスを指定すれば良い
と理解していたのですが、背景に画像が表示されませんでした。

その後、下記のように修正すると、画像が表示されるようになりました。

firefox3.5 →修正後は画像が表示される。
Internet explore 8 →修正前、修正後ともに表示されない。

-----------------------------------------------------------------------

【修正前】
#contents{
width:750px;
background-image:url(/img/nature_01.gif);

【修正後】
#contents{
width:750px;
background-image:url(../img/nature_01.gif);

------------------------------------------------------------------------
OS・・・windows xp

なぜ、こうなるのか、わかるかたがいましたら教えてください。
よろしくお願いします。

回答No.4

Safe_Mode · ベストアンサー

>まだアップロードはしておらず、IE、FireFoxでの確認もローカルで
>行っています。
>この辺に問題があるのでしょうか？
それは問題ではないですね。むしろアップロードする前に表示確認できる
ように相対パスを使っているわけですから。
IE8で開発者ツールを使って、htmlファイルとcssの関係も念のために
チェックしてみてはどうですか？
また、当該画像ファイルをcssファイルと同じ階層に移動させて
background-image:url(nature_01.gif);
で表示されるか確認してみてはどうでしょうか。

お礼

ありがとうございました。

回答No.3

Safe_Mode

>．．/img/nature_01.gif
>にすると画像が表示できるようになります。
であれば、cssファイルのある場所から見て「img」フォルダは1つ上の
階層のはずです。
そのあたりを再確認してみてはどうですか？

お礼

ありがとうございました。

補足

回答ありがとうございました。

現在デスクトップ上にフォルダがあり、その直下に「cssファイル」と 「imgフォルダ」が
同じ階層にあります。

これは、何度も確認したので間違いないです。

まだアップロードはしておらず、IE、FireFoxでの確認もローカルで行っています。

この辺に問題があるのでしょうか？

回答No.2

Safe_Mode

相対パスの記述が間違っていたのですね。
．．／　はcssファイルのあるディレクトリからみて1つ上のディレクトリを
指しています。
（半角だと見難いので、あえて全角で書いてます。半角だと../）
「img」ディレクトリはcssと同じ階層ですので　．／　でOKのはずです。
したがって
background-image:url(./img/nature_01.gif);
または　
background-image:url(img/nature_01.gif);
でOKのはずです。

お礼

ありがとうございました。

補足

回答ありがとうございました。

background-image:url( ．/img/nature_01.gif);
background-image:url( img/nature_01.gif);

上の２つでは、画像が表示されず

．．/img/nature_01.gif

にすると画像が表示できるようになります。

cssファイルとimg フォルダが同じ階層にあるのになぜ、このようになるのか
理解できずに質問しました。

回答No.1

noname#119957

その、フォルダ構成のままでサーバーにUPするなら、
../img/・・・
でないとダメです。これは、CSSファイルからの相対参照になるからです。

IEのテストは、キャッシュをクリヤしてから再確認してくださいね。

お礼

ありがとうございました。

補足

回答ありがとうございました。

cssファイルとimgフォルダは、同じ階層にあるので、相対パスは「img/・・・」になるのでは、
無いでしょうか？

IEのキャッシュをクリアして再確認しましたが、画像は表示されませんでした。