プログラミング
 Computer >> コンピューター >  >> プログラミング >> プログラミング

CSSのbackground-image（背景画像）が表示されないときの対処法4選｜HTML/CSS

CSSで背景画像を扱うのは意外と厄介です。コード上で正しく設定したつもりでも、別の要因によってbackground-imageがページに表示されないことがあるからです。

そこでこの記事では、HTMLとCSSを使って「背景画像が表示されない」問題を解決するための4つの方法を紹介します。

1. CSSファイルがHTMLファイルに正しくリンクされているか確認する

CSSのスタイルをWebサイトに読み込ませるには、HTMLファイル内に<link>タグを追加する必要があります。このタグは<head></head>タグの中に配置し、次のような形になります。

<link rel="stylesheet" href="/style.css">

CSSファイルが正しく読み込まれているかどうかを見分ける方法

ひとつの目安は、サイトを開いたときに背景が真っ白で、テキストがすべてTimes New Romanになり、色やその他のスタイルがまったく反映されていない状態です。これはCSSが読み込めていない典型的なサインです。

また、ブラウザの検証ツール（デベロッパーツール）を使って確認することもできます。ページ上のどこかを右クリックして「検証」を選ぶか、Ctrl+Shift+I（MacはCmd+Option+I）を押しましょう。検証ツール上でCSSファイルに対して404 not foundというエラーや、The resource... was blocked due to MIME type mismatch（MIMEタイプの不一致によりリソースがブロックされました）といったエラーが表示されていれば、CSSファイルの読み込みに問題があることを示しています。

こうしたエラーが出ていてサイトのスタイルが崩れている場合は、まず<link>タグを確認しましょう。href属性で指定しているファイル名が実際のCSSファイル名と一致しているか、パスが正しいかをチェックします。

パスはHTMLファイルの場所からの相対パスである必要があります。CSSファイルがHTMLファイルと同じディレクトリにあるなら、hrefはstyle.css（または実際のCSSファイル名）とすればOKです。

筆者はパスの先頭にスラッシュ/を付けることが多く、たとえばhref="/style.css"のように書きます。こうすると、パスが必ずWebサイトのルートから始まるようになります。

これは、異なるサブフォルダにある複数のページが同じ<head>のコードを読み込んでいる場合に特に有効です。たとえば、共通コードを持つテンプレート型CMS（コンテンツ管理システム）を使っているケースなどが該当します。

2. background-imageのurl()に画像パスが正しく設定されているか確認する

CSSファイルのリンクが正しいことを確認できたら、次は画像そのものの指定が正しいかもチェックしましょう。ここでもブラウザの検証ツールを開いて確認します。

背景画像が正しく読み込まれているかどうかを見分ける方法

背景画像が読み込まれていないように見え、検証ツール上でその画像に対して404エラーが表示されている場合は、画像そのものに問題がある可能性が高いです。

この場合は、画像のファイル名が実際のファイルと一致しているか、background-image: url()の中のパスが正しい場所を指しているかを再確認してください。

重要なポイントとして、画像ファイルの場所はWebサイトのルートではなく、CSSファイル自身の場所から見た相対パスで指定する必要があります。CSSファイルがサブフォルダに入っている場合、ルート直下にある場合とはパスが変わってきます。

具体例で説明しましょう。次のようなWebサイトのファイル構成があるとします。

(project folder)
  |-- index.html
  |-- (css)
        |-- style.css
  |-- (img)
        |-- cat-pic-1.jpg

このサイトには、プロジェクトのルートにindex.htmlがあり、cssフォルダの中にstyle.css、imgフォルダの中にcat-pic-1.jpgという画像が入っています。

CSSでcat-pic-1.jpgを背景画像として読み込みたい場合、ファイルパスは次の手順をたどる必要があります。

  • cssフォルダから1階層上へ移動する
  • imgフォルダへ入る
  • 画像ファイル自体を読み込む

したがって、CSSファイル内のbackground-imageプロパティは次のようになります。

background-image: url('../img/cat-pic-1.jpg');

../という記号は、ファイル構成の中で1階層上に移動することを意味します。

同様のことは、次のように書いても実現できます。

background-image: url('/img/cat-pic-1.jpg');

こちらの書き方は、先頭のスラッシュ（/）でWebサイトのルートからスタートし、そこからimgフォルダに入って画像ファイルを読み込むアプローチです。

親フォルダを辿る方法でも、サイトのルートから始める方法でも、忘れてはいけないのは検証ツールを使って、画像が正しく読み込まれているのか、それとも404エラーが出ているのかを必ず確認することです。

3. 要素のwidthやheightを明示的に設定する

画像が表示されないのに404エラーも出ていない場合は、検証ツールで要素そのものを調べてみましょう。

要素の中にHTMLコンテンツがない場合、その幅や高さがゼロ（あるいはその両方！）になっていることがあります。つまり、背景画像は技術的には正しく読み込まれていても、要素自体のサイズが0pxでは実質的に見えなくなってしまうのです。

上の例のように、Webサイトと検証ツールを並べて見てみましょう。右側のペインで.card__image要素にカーソルを合わせると、左側のペインの該当要素の上にラベルが表示され、幅が354px、高さが0pxであることが分かります。

高さが0pxでは、要素は画面に表示されません。

これを解決するには、.card__image要素の高さを明示的に設定します。たとえばheight: 120px;のように指定します。要素に入るテキストの長さが変動する場合は、代わりにmin-height: 120px;を設定するのも良い方法です。こうすると最低でも120pxの高さが確保され、テキストがより多くのスペースを必要とする場合には自動的に高くなります。

4. CSSのbackground系プロパティの構文が正しいか確認する

最後に確認すべきは、background関連のCSSプロパティの構文が正しいかどうかです。

よく使われるプロパティと、その値の例をいくつか挙げます。

  • background-color: #000000;
  • background-image: url("/landscape1.jpg");
  • background-position: center;
  • background-repeat: no-repeat;
  • background-size: cover;

また、これらすべての値を1つのスタイルルールにまとめられるショートハンドのbackgroundプロパティを使うこともできます。

background: #000 center/cover url("/img/landscape1.jpg") no-repeat;

このショートハンドプロパティを多数の値と一緒に使う場合は、構文が正しいか特に注意が必要です。各backgroundプロパティの記述順序は基本的に自由ですが、background-sizeを設定する場合には落とし穴があります。

background-sizeの値は、background-positionの値の直後に、スラッシュ（/）で区切って続けた場合にのみ有効になります。先ほどの例ではcenter/coverと書いており、centerがbackground-position、coverがbackground-sizeに相当します。

background-positionの値だけを単独で使うことはできますが、coverだけを単独で書くと、そのCSSルール全体が無効になり、background関連のプロパティが一切機能しなくなります。

そのような場合、検証ツール上では無効なルールとして次のように表示されます。

  1. CAMオーバーレイが表示されない・機能しないときの対処法まとめ

    Windowsユーザーの間で、NZXTの「CAM」のオーバーレイ機能が、テストした一部またはすべてのゲームで動作しないという報告が相次いでいます。最初から一度も動作しなかったというケースもあれば、以前は正常に機能していたのに突然使えなくなったという声もあります。この不具合は特定のWindowsバージョンに限定されたものではなく、Windows 7、Windows 8.1、Windows 10のいずれでも発生が確認されています。CAMオーバーレイが動作しなくなる原因とは？本記事では、多数のユーザー報告と、実際に効果があったとされる修復方法を分析しました。その結果、この問題を引き起こす可能性がある

  2. .gitignoreが機能しないときの原因と解決策を徹底解説

    GitHubは、コードの共同作業やリポジトリ共有の分野において世界的な標準となっているプラットフォームです。GitHubは主にバージョン管理ソフトウェアとして機能し、分散型バージョン管理やSCM（ソースコード管理）をユーザーに提供します。世界中の大手企業から個人開発者まで、幅広い層に利用されています。こうしたプラットフォームには特有の技術的な課題がつきものです。その中でも開発者から頻繁に報告されるのが「.gitignoreが正しく機能しない」という問題です。Gitが.gitignoreを完全に無視したり、一部のルールだけが適用されたりするケースがあります。この問題は環境ごとに状況が異なるため、