背景画像を background-image で表示させようとする時、画像がうまく表示されないことがあります。
その時は、以下のいずれかだと思います。
・画像のファイル名が間違っている
・画像の入っているフォルダ名が間違っている
・画像の相対ファイルパスが間違っている
・画像の絶対ファイルパスが間違っている
・cssファイルを読み込めてない
/home ホーム(ここからcssと画像を読み込みます)
/images 画像が入っているフォルダ
/css cssファイルがあるフォルダ
上記のような構造の場合ですが、
(ここで問題は、CSSフォルダを作って、その中にCSSファイルを置いた場合、ということです)
例えば、index.html から /css フォルダに置いてある
style.css ファイルをリンクする時、
(<link rel=”stylesheet” href=”css/style.css”>といった感じで)
× background-image: url(“images/sky.jpg”);
といった、 index.html をベースにファイルパスを書くと間違いです。
○ background-image: url(“../images/sky.jpg”);
style.css ファイルから、画像の相対パスを書かなくてはいけません。
リンクではなく、
<head>内の<style></style>で記述する場合は、
background-image: url(“images/sky.jpg”);
で、OKですので。
当たり前のことですが気づけずこの記事にたどりつきました。本当に助かりました!ありがとうございます
いえいえ、こちらこそ、当記事にたどりついていただきまして、ありがとうございました!
わかりきった事だったのに…
久しぶりの制作かつ寝不足だったので、本当に助かりました。
ありがとうございます。
いえいえ^^;お役に立てて良かったです^^!!
コメントいただきまして、ありがとうございますm(__)m
天の声でした。ありがとうございました。
そう言っていただいて、こちらこそありがとうございます。
「index.html をベースにファイルパスを書くと間違いです。」・・・そうだったのですか、、何日も悩みましたが解決しました。ありがとうございました。
ご丁寧にコメントいただきまして、ありがとうございます
無事に解決できてよかったです!