/CSSのbackground-imageの背景がブラウザで表示されない時の対処方法2019.11.04CSSのbackground-imageの背景がブラウザで表示されない時の対処方法TweetPocketCSSでbackground-imageプロパティを使用すると、ページの背景に指定した画像ファイルを表示することができます。記述したはずなのに画像が表示されないということも少なくなく、その場合は記述方法や画像ファイル本体、ファイルの配置方法の見直しが必要になります。本記事では、CSSのbackground-imageプロパティで背景画像が表示されない時の対処方法を紹介します。確認すべきポイントと問題の切り分け方法について解説するので、参考にしてみて下さい。スタイルシートが正しく適用されているか確認するまずスタイルシートの適用が正しくできているかをご確認ください。確認の際は、次のような方法が有効です。CSSの読み込みを確認するブラウザの開発者ツールを使ってCSSが読み込まれていることを確認することができます。開発者ツールはWindowsの場合、Edge・ChromeのブラウザではF12キーを押すことで呼び出すことができます。「要素/Elements」タブ内にある「CSS/スタイル」パネルを確認し、CSSに記述した内容が反映されているか調べてみてください。間違いはないか調べて下さい。HTMLのコードに単純な記述ミスがないか確認します。HTMLの場合は、タグの閉じ忘れがないか確認しましょう。CSSの場合は、背景画像を適用するセレクタの指定、プロパティ名の指定に間違いがないか見直します。HTML側で、class属性(もしくはid属性)のスペルを間違えているケースもあるため、HTMLとCSSで同じ名前になっているかも必ず確認しておきましょう。画像ファイルのパスを確認するbackground-imageで背景画像が表示されない場合、多くは画像ファイルのパスの指定ミスが原因です。次の方法を試して原因の特定を行ってみてください。background-imageプロパティの記述background-imageプロパティの基本的な記述ルールに問題がないか確認します。background-imageプロパティは次の形で記述します。url("画像ファイルへのパス");「url」と半角括弧の間にはスペースを入れないことにご注意ください。画像のパスを確認する画像ファイルが絶対パスまたは相対パスで指定されていることを確認します。url("https://itojisan.xyz/images/bg_image.png");特に外部CSSファイルを使用していて画像ファイルを相対パスで記述する場合、「CSSファイルからの相対パスで画像ファイルを指定する」ことにご注意ください。HTMLファイルからの相対パスではありません。絶対パスの場合も、記述した画像パスをブラウザのアドレスバーから直接開いて、画像が表示されることを確認して下さい。相対パスを使用している場合は絶対パス、絶対パスを使用している場合は相対パスを使用してみる方法も有効です。アップロード後のファイル名にも注意プレビューでは問題ないがアップロードすると表示されないという場合は、アップロード後の画像ファイルのファイル名・パスを確認しましょう。FTPではなくCMSで画像をアップロードすると画像ファイルのパスが変わる場合があります。画像ファイルが問題なくアップロードされていることもご確認ください。画像ファイルが読み込みできている確認する開発者ツール(F12)を使って画像ファイルが読み込まれていること(エラーが出ていないこと)を確認できます。Found)のようなメッセージが表示されている場合は画像ファイルのパス指定に問題があることが考えられます。画像ファイルの保存場所、パスの指定方法、画像ファイル名をご確認ください。画像のファイル/保存場所を変更する一度画像ファイルの保存場所を別のディレクトリに変更して、違うファイルパスで画像が表示できないか試してみましょう。別の画像が表示できないか確認して、画像ファイルそのものに問題がないか原因の切り分けを行います。background-colorを試す背景色を変更できるbackground-colorで画像ではなく色の指定はできるのかどうか調べてみましょう。red;}色の指定ができる場合は、画像ファイルのパス指定または画像ファイル本体に問題があることが考えられます。スタイル適用先の要素の高さを確認するCSSファイル・画像ファイルどちらも正常に読み込まれているはずなのに画像が表示されない場合、background-imageを適用させようとしている要素に十分な高さ・幅がない可能性があります。画像を表示するのに十分な大きさがあるか画像を表示したい要素に十分な高さ・幅があるか確認して下さい。要素の大きさは、開発者ツールのインスペクタを使うと、DOM要素のサイズを確認することができます。要素の内容が空だとボックスの高さがゼロになり、画像が表示できない原因になります。親要素の高さも合わせて確認してください。要素の高さ・幅を固定してみるスタイルシートに、height/min-heightプロパティやwidth/min-widthプロパティを追加してボックスの高さを固定する。min-width:100%;}ボックスの高さや幅を直接指定することで、画像を表示する領域を確保され、画像が正常に表示される可能性があります。ブラウザを変更するブラウザ側に問題があり、背景画像が正常に表示されていないケースも考えられます。別のブラウザでページを表示してみてください。ブラウザの変更で問題が解決した場合はキャッシュが原因の可能性があります。その際はスーパーリロード(Ctrl+F5)を試すか、ブラウザのキャッシュを削除してみてください。セレクタ・プロパティの指定を変えてみるCSSのセレクタやプロパティの指定によって、background-imageに指定した画像が正常に表示される可能性があります。個別性が高いセレクタに変更してみるCSSのセレクタは、個別性が高い程優先されるます。そのため、正しいbackground-imageの記述をしていても、他のセレクタの指定によってスタイルが上書きされているケースがあります。セレクタを個別性が高い指定に変更して、スタイルが適用されないか確認して下さい。!important宣言するセレクタのスタイルで!important宣言をすることで、最重要規則になります。複数のスタイルシートを読み込んでいるが、上書きしているスタイルの指定を見つけることが難しい場合は、background-imageを!important宣言して画像が表示されないか確認してみて下さい。backgroundプロパティを使ってみるページ背景の画像表示はbackgroundプロパティでもできます。CSSファイルに記述されている「background-image」のプロパティ名部分を「background」に置き換えてみてください。url("画像ファイルへのパス");「background-image」は背景画像を指定するためのプロパティであるのに対し、「background」は背景に関するスタイル情報を一括で指定するためのプロパティです。基本的にはbackground-imageの代わりに使用しても問題ありませんが、一括指定という特性上省略された項目は初期値に上書きされてしまいます。そのため、場合によっては画像が想定通りに表示されなくなったりレイアウトが崩れたりすることもあるのでご注意ください。Windows10投稿者:ITおじさん岐阜県の30代IT関連の仕事をしている、おじさんです。スマホ、パソコンの些細なトラブルや悩みの解決方法を紹介しています。ニッチでなかなか見つからない情報を発信することを心がけています。*メールアドレス(公開はされません。date*日本語が含まれない投稿は無視されますのでご注意ください。