CSSを外部出力して背景を製作する方法

Question

下記のソースだと背景が反映されません。なぜでしょうか？

body{
background-image:url('paper-e9.png');
}

ＨＴＭＬのほうにはbodyタグが存在しています。
画像参照の仕方が可笑しいのでしょうか？

Answer 1

background-image:url(’hogehoge.●●●');

（●●●は.png .gif .jpgとかの拡張子）

は、
「保存してある（現在作業している、触っている）cssのファイル（場合よってはhtml）から見て」
の参照です。

＜よくあるパターン＞
style.css が、cssっていうフォルダに入ってて、
画像が、imagesっていうフォルダに入ってたら

background-image:url(’../images/hogehoge.●●●');

ですね。

・・・という質問の意図だと思ったのですが、意図違いだったら、ごめんなさい。。

Answer 2

画像はCSSファイルと同じフォルダに配置していますか？

index.xml
└styles
└main.css

のような構成場合は、index.htmlからの相対パスではなく、main.cssからの相対パスになります。

また、htmlにstyleのlinkタグは適切に記述されていますか？

Comments

[MakotoMiyazaki]

もし、Chromeを使っているのであれば、Developer Toolsで
・bodyに正しくCSSが適用されているか
　→bodyタグにカーソルを合わせて、右のstylesにCSSが適用されているか
・設定された画像のパスが正しいのか
　→適用されているCSSの画像パスにマウスを乗せて画像が表示されるか
を調べることができるので、使ってみてください。

Answer 3

そこに相対パスを書くなら、cssファイルが存在するところから、

画像ファイルにパスを通すことが必要です。

又は、CSSファイルが置いてある同じ場所に画像を置く！

絶対パスなら問題はないかと！