背景画像の設定は、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;指定できる値は、以下の通りです。
| 値 | 説明 |
| repeat | リピート表示されます。初期値ですので、繰り返し表示をさせたい場合は指定不要です。 |
| repeat-x | 横方向（X軸方向）にリピートして表示します。 |
| repeat-y | 縦方向（Y軸方向）にリピートして表示します。 |
| no-repeat | リピートしません。 |
注意点ですが、繰り返し表示さえたくない場合は、no-repeatを指定する必要があります。
background-repeatの初期値はrepeatです。
そのため、指定しない場合は画像が繰り替えし表示されてしまいます。
背景画像のサイズを変更する。
background-imageで表示している画像は、元の画像の大きさそのままで表示されます。
そのため、指定した要素によっては画像が見切れてしまったりします。
思い通りの表示にするためにサイズを調整しましょう。
背景が元のサイズのまま表示されるのは、あくまでも表示させる要素に高さと幅がある場合のみです。
表示される画像よりも、表示させる要素の方が小さい場合は、見切れたりして、正しく表示されません。
プロパティは、以下の通りです。
background-size: contain;指定できる値は、以下の通りです。
| 値 | プロパティ |
| auto | 自動算出します。初期値です。 |
| contain | 元の画像の縦横比を維持します。要素の中に全てが収まるように調整します。 |
| cover | 元の画像の縦横比は維持します。要素を覆うようにサイズ調整します。 |
| px | 絶対値でサイズを指定します。 |
| ％ | 割合でサイズを指定します。要素が基準になります。 |
背景画像の位置を動かす。
background-imageは、デフォルトで左上が基準になり、画像が表示されます。
要素を画像の真ん中にしたい場合や、右側に寄せたりしたい場合は、調整が必要になります。
プロパティは、以下の通りです。
background-position: 0 0;指定でいる値は、以下の通りです。
上記のコードだと、「0 0」のところに数値と単位を入れてあげます。
| 値の種類 | 値（説明） |
| キーワード | center、left、right、top、bottomと単語で指定します。 |
| px | 絶対値でサイズを指定します。 |
| ％ | 割合でサイズを指定します。要素が基準になります。 |
背景画像は複数指定することが可能。
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は色の指定もできます。
そして、どちらか一方だけでなく、両方表示することができます。
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は、簡単に画像を背景に設定できます。
しかし、調整をしないままでは、思った表示にならず、見栄えを整える必要があります。
見栄えを整えるには、以下の３つのプロパティを指定してあげてください。
プロパティの値は、全て覚える必要はないので、適宜必要な値を検索して調べて、適用させながら調整してく形で十分です。
背景画像は、よく使用する表現なので、今回を機会に使いこなせるようになりましょう。