background-imageで背景画像が表示されない

背景画像を 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ですので。

「background-imageで背景画像が表示されない」への8件のフィードバック

  1. 当たり前のことですが気づけずこの記事にたどりつきました。本当に助かりました!ありがとうございます

  2. わかりきった事だったのに…
    久しぶりの制作かつ寝不足だったので、本当に助かりました。

    ありがとうございます。

  3. 「index.html をベースにファイルパスを書くと間違いです。」・・・そうだったのですか、、何日も悩みましたが解決しました。ありがとうございました。

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA