background-imageの使い方。背景画像を思い通りに表示しよう！

背景画像の設定は、WEBサイト制作では欠かせないものです。

ただ、少しクセのあるプロパティでもあるので、思ったとおりに表示されないことがよくあります。

• 指定したけど、表示されない。
• イメージしていた表示ではない。

なんてことありませんか？

この記事では、background-imageとはどのようなプロパティなのかを解説したのちに、背景画像を調整する方法を解説していきます。

覚えてしまえば、簡単に行えます！

background-imageとは？

background-imageは、要素の背景に画像を指定（表示）するプロパティです。

好きな画像を指定して、表示させることができます。

古いブラウザでも動作するプロパティなので、汎用性も高いです。

background-imageを使って画像を表示させる。

デモで使用するHTMLは以下のようにします。

<div class="bg_img"></div>

次は、デモのHTMLに適用しているCSSです。

.bg_img {
  background-image: url(./img/hoge.jpg);
  height: 500px;
  width: 100%;
}

上記の中に、background-imageが指定してあると思います。

プロパティの値は、絶対パス、もしくは相対パスで指定します。

どちらの指定でも構いません。

表示した画像の調整をする。

background-imageで表示した画像に大きさを指定してみましょう。

サイズを何も指定していない状態では、元の画像サイズに合わせて表示されている状態です。

上記の例では、widthとheightが指定してあります。

背景画像を繰り返し表示する。

background-imageで表示した画像は、繰り返し表示することが可能です。

タイルのように繰り返し並び替えたい場合などは、リピートさせることで、表現することが可能です。

CSSのセレクタは、以下のとおりです。

background-repeat: repeat;

指定できる値は、以下の通りです。

注意点ですが、繰り返し表示さえたくない場合は、no-repeatを指定する必要があります。

background-repeatの初期値はrepeatです。

そのため、指定しない場合は画像が繰り替えし表示されてしまいます。

背景画像のサイズを変更する。 

background-imageで表示している画像は、元の画像の大きさそのままで表示されます。

そのため、指定した要素によっては画像が見切れてしまったりします。

思い通りの表示にするためにサイズを調整しましょう。
背景が元のサイズのまま表示されるのは、あくまでも表示させる要素に高さと幅がある場合のみです。
表示される画像よりも、表示させる要素の方が小さい場合は、見切れたりして、正しく表示されません。

プロパティは、以下の通りです。

background-size: contain;

指定できる値は、以下の通りです。

背景画像の位置を動かす。

background-imageは、デフォルトで左上が基準になり、画像が表示されます。

要素を画像の真ん中にしたい場合や、右側に寄せたりしたい場合は、調整が必要になります。

プロパティは、以下の通りです。

background-position: 0 0;

指定でいる値は、以下の通りです。
上記のコードだと、「0 0」のところに数値と単位を入れてあげます。

背景画像は複数指定することが可能。

background-imageは、背景画像を複数指定することが可能です。

指定方法は、以下のとおり。

background-image: url(./img/hoge-01.jpg), url(./img/hoge-02.jpg);

最初に指定した画像が1番下に配置されて、順番に上に重なります。

前述した調整用のプロパティも同じように複数枚の指定に対応しています。

background-size: contain, cover;
background-repeat: repeat, no-repeat;
background-position: 0 0, 0 0;

background-imageが表示されないときの原因。

指定したはずなのに、背景画像が表示されない。

background-imageで、いちばん多いつまずきです。

原因はだいたい決まっているので、上から順番に確認してみてください。

要素に高さがない。

いちばん多い原因がこれです。

background-imageは、あくまでも要素の背景です。

そのため、指定した要素の中身が空っぽだと高さが0になり、背景を表示する場所がなくなってしまいます。

<div class="bg_img"></div>

上記のように中身が空の要素は、高さが0の状態です。

この場合は、heightを指定してあげれば表示されます。

.bg_img {
  background-image: url(../img/hoge.jpg);
  height: 500px;
}

中にテキストや画像が入っている要素であれば、その分の高さが出るので、指定しなくても表示されます。

パスが間違っている。

次に多いのが、パスの間違いです。

ここで気をつけたいのが、background-imageのパスはCSSファイルからの相対パスになるという点です。

HTMLファイルからの相対パスではありません。

例えば、以下のようなファイル構成だとします。

index.html
├ css/style.css
└ img/hoge.jpg

imgタグであれば「./img/hoge.jpg」で表示できます。

ですが、style.cssの中に書く場合は、一度cssフォルダから出てあげる必要があります。

/* 表示されない */
background-image: url(./img/hoge.jpg);

/* 表示される */
background-image: url(../img/hoge.jpg);

パスの書き方については、HTMLでのパスの指定方法と書き方。相対パスと絶対パスの違いも解説。でも解説しているので、あわせて確認してみてください。

ショートハンドで上書きしている。

backgroundとbackground-imageを両方書いていると、あとから書いたほうで上書きされます。

.bg_img {
  background-image: url(../img/hoge.jpg);
  background: #fff; /* 背景画像が消えてしまう */
}

backgroundはショートハンドなので、画像の指定も含めてまとめてリセットしてしまいます。

順番を入れ替えるか、background-colorで指定してあげましょう。

ファイル名の大文字と小文字が違う。

ローカルでは表示されていたのに、サーバーにアップしたら消えた。

このパターンは、ファイル名の大文字・小文字を疑ってみてください。

WindowsやMacは大文字と小文字を区別しませんが、サーバー（Linux）は区別します。

「Hoge.jpg」と「hoge.jpg」は、別のファイル扱いになります。

それでも表示されないときは。

検証ツール（デベロッパーツール）で確認するのが、いちばん早いです。

対象の要素を選択して、background-imageに打ち消し線が入っていないかを見てください。

打ち消し線が入っていれば、別のCSSに上書きされています。

打ち消し線が入っていないのに表示されない場合は、パスかファイル名の問題です。

Networkタブを開いて、画像が404になっていないかを確認しましょう。

背景画像と背景色同時に表示する。

前述した内容は、画像の表示のみでしたが、backgroundは色の指定もできます。
そして、どちらか一方だけでなく、両方表示することができます。

background: red url(./img/hoge-01.jpg) no-repeat center center / cover;

上記はショートハンドを利用して、一度に指定しました。
前述したように、個別に指定しても表示することができます。

  background-color: red;
  background-image: url(./img/hoge-01.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;

上記のように個別で指定してあげるさいは、ショートハンドの順番と同じ順番で記述します。
そうしないと、先に記述されたコードを、後から記述されたコードで上書きしてしまいうまく表示されません。

まとめ

background-imageは、簡単に画像を背景に設定できます。

しかし、調整をしないままでは、思った表示にならず、見栄えを整える必要があります。

見栄えを整えるには、以下の３つのプロパティを指定してあげてください。

プロパティの値は、全て覚える必要はないので、適宜必要な値を検索して調べて、適用させながら調整してく形で十分です。

背景画像は、よく使用する表現なので、今回を機会に使いこなせるようになりましょう。