CSSのbackground-imageの背景がブラウザで表示されない時の対処方法

CSSでbackground-imageプロパティを使用すると、ページの背景に指定した画像ファイルを表示することができます。

しかし、正しく記述したはずなのに画像が表示されないということも少なくなく、その場合は記述方法や画像ファイル本体、ファイルの配置方法の見直しが必要になります。

本記事では、CSSのbackground-imageプロパティで背景画像が表示されない時の対処方法を紹介します。確認すべきポイントと問題の切り分け方法について解説するので、参考にしてみて下さい。

対処1: スタイルシートが正しく適用されているか確認する

まずスタイルシートの適用が正しくできているかをご確認ください。確認の際は、次のような方法が有効です。

確認1: CSSの読み込みを確認する

ブラウザの開発者ツールを使ってCSSが読み込まれていることを確認することができます。

「要素/Elements」タブ内にある「CSS/スタイル」パネルを確認し、CSSに記述した内容が反映されているか調べてみてください。

外部CSSファイルを使用する場合は、CSSファイルのパスが正しいか、また、パスの記述方法・指定方法・記述位置に間違いはないか調べて下さい。

確認2: 記述ミスがないか確認する

CSS、 HTMLのコードに単純な記述ミスがないか確認します。

対処2: 画像ファイルのパスを確認する

background-imageで背景画像が表示されない場合、多くは画像ファイルのパスの指定ミスが原因です。

次の方法を試して原因の特定を行ってみてください。

確認1: background-imageプロパティの記述

background-imageプロパティの基本的な記述ルールに問題がないか確認します。

background-imageプロパティは次の形で記述します。

background-image: url("画像ファイルへのパス");

「url」と半角括弧の間にはスペースを入れないことにご注意ください。

確認2: 画像のパスを確認する

画像ファイルが絶対パスまたは相対パスで指定されていることを確認します。

/* 相対パス */

background-image: url("bg_image.png");  /* スタイルシートと同じディレクトリ */
background-image: url("../bg_image.png"); /* スタイルシートから１つ上の階層 */


/* 絶対パス */
background-image: url("https://itojisan.xyz/images/bg_image.png");

特に外部CSSファイルを使用していて画像ファイルを相対パスで記述する場合、「CSSファイルからの相対パスで画像ファイルを指定する」ことにご注意ください。HTMLファイルからの相対パスではありません。

絶対パスの場合も、記述した画像パスをブラウザのアドレスバーから直接開いて、画像が表示されることを確認して下さい。

また、相対パスを使用している場合は絶対パス、絶対パスを使用している場合は相対パスを使用してみる方法も有効です。

アップロード後のファイル名にも注意

プレビューでは問題ないがアップロードすると表示されないという場合は、アップロード後の画像ファイルのファイル名・パスを確認しましょう。

FTPではなくCMSで画像をアップロードすると画像ファイルのパスが変わる場合があります。また、画像ファイルが問題なくアップロードされていることもご確認ください。

確認3: 画像ファイルが読み込みできている確認する

開発者ツール（F12）を使って画像ファイルが読み込まれていること（エラーが出ていないこと）を確認できます。

コンソールのエラーログにファイルが見つかりませんでした（File Not Found）のようなメッセージが表示されている場合は画像ファイルのパス指定に問題があることが考えられます。

画像ファイルの保存場所、パスの指定方法、画像ファイル名をご確認ください。

確認4: 画像のファイル/保存場所を変更する

一度画像ファイルの保存場所を別のディレクトリに変更して、違うファイルパスで画像が表示できないか試してみましょう。

また、別の画像が表示できないか確認して、画像ファイルそのものに問題がないか原因の切り分けを行います。

確認5: background-colorを試す

背景色を変更できるbackground-colorで画像ではなく色の指定はできるのかどうか調べてみましょう。

.image-area{
  background-color: red;
}

色の指定ができる場合は、画像ファイルのパス指定または画像ファイル本体に問題があることが考えられます。

対処3: スタイル適用先の要素の高さを確認する

CSSファイル・画像ファイルどちらも正常に読み込まれているはずなのに画像が表示されない場合、background-imageを適用させようとしている要素に十分な高さ・幅がない可能性があります。

確認1: 画像を表示するのに十分な大きさがあるか

画像を表示したい要素に十分な高さ・幅があるか確認して下さい。

要素の内容が空だとボックスの高さがゼロになり、画像が表示できない原因になります。親要素の高さも合わせて確認してください。

確認2: 要素の高さ・幅を固定してみる

スタイルシートに、height/min-heightプロパティやwidth/min-widthプロパティを追加してボックスの高さを固定する。

.image-area{
  background-image: url("画像ファイルへのパス");
  height:500px;
  min-width:100%;
}

ボックスの高さや幅を直接指定することで、画像を表示する領域を確保され、画像が正常に表示される可能性があります。

対処4: ブラウザを変更する

ブラウザ側に問題があり、背景画像が正常に表示されていないケースも考えられます。別のブラウザでページを表示してみてください。

もしブラウザの変更で問題が解決した場合はキャッシュが原因の可能性があります。その際はスーパーリロード（Ctrl+F5）を試すか、ブラウザのキャッシュを削除してみてください。

対処5: セレクタ・プロパティの指定を変えてみる

CSSのセレクタやプロパティの指定によって、background-imageに指定した画像が正常に表示される可能性があります。

方法1: 個別性が高いセレクタに変更してみる

CSSのセレクタは、個別性が高い程優先されるます。そのため、正しいbackground-imageの記述をしていても、他のセレクタの指定によってスタイルが上書きされているケースがあります。

セレクタを個別性が高い指定に変更して、スタイルが適用されないか確認して下さい。

//変更前
.image-area{
  background-image: url("画像ファイルへのパス");
}

//変更後
.content .content-area .image-area{
  background-image: url("画像ファイルへのパス");
}

方法2: !important宣言する

セレクタのスタイルで!important宣言をすることで、最重要規則になります。

複数のスタイルシートを読み込んでいるが、上書きしているスタイルの指定を見つけることが難しい場合は、background-imageを!important宣言して画像が表示されないか確認してみて下さい。

background-image: url("画像ファイルへのパス") !important;

方法3: backgroundプロパティを使ってみる

ページ背景の画像表示はbackgroundプロパティでもできます。CSSファイルに記述されている「background-image」のプロパティ名部分を「background」に置き換えてみてください。

background: url("画像ファイルへのパス");

「background-image」は背景画像を指定するためのプロパティであるのに対し、「background」は背景に関するスタイル情報を一括で指定するためのプロパティです。

基本的にはbackground-imageの代わりに使用しても問題ありませんが、一括指定という特性上省略された項目は初期値に上書きされてしまいます。

そのため、場合によっては画像が想定通りに表示されなくなったりレイアウトが崩れたりすることもあるのでご注意ください。