16. 背景に画像を配置しよう background-image

目次

背景に画像を表示しよう

背景に画像を表示するには、background-imageプロパティを使います。

値はurl(“”)とし、()の中は画像のurlを入れます。画像のurlは相対パスが使えますが、htmlファイルではなく、cssファイルがある場所を基準にする必要があります(cssファイルはhtmlファイルと同じ場所に置くことが多いため、あまり気にする必要はないかもしれません)。画像がcssファイルと同じ場所にあるなら、単に画像のファイル名を書くだけで大丈夫です。

ブラウザで表示すると、背景の領域を埋め尽くすように画像が配置されているのが分かります。このように、background-imageを指定しただけでは、画像のサイズが背景を埋め尽くすほど大きくない場合は、画像は繰り返し表示されます。

画像のサイズを変える

表示される画像のサイズを変えるには、background-sizeプロパティを使います。
値はcontain・cover・px・%を指定できます。

background-size:contain;

containでは、画像のアスペクト比は維持したまま、画像全体を表示できる限界まで画像が大きくなります。

↑このように、縦の限界まで画像が広がって、右の余った部分では画像が繰り返し表示されています。

background-size:cover;

coverでは、画像のアスペクト比は維持したまま、背景の領域を完全に覆うまで画像が広がります。そのため、画像の一部が切れることもあります。

↑背景の横方向を完全に覆うように広がり、表示しきれなかった画像の下の部分が切れています。

background-size:〇〇px;

background-sizeの値はpxで指定することもできます。
値を1つだけ指定すると、画像のwidthがその値になり、heightはアスペクト比を維持したまま自動で決まります。


↑背景のwidthが300pxで画像のwidthを60pxにしたので、横に5つ並んで表示されました。また、画像のアスペクト比も維持されています。

一方で値を2つ指定すると、1つ目の値が画像のwidth、2つ目の値がheightになります。ただし、適当に値を指定してしまうとアスペクト比がおかしくなることがあるので、画像の種類によっては注意が必要です。



background-size:〇〇%;

値をで指定した場合、何に対しての%になるかというと、背景の領域のwidthやheightに対する割合になります。%も、pxと同じように値は1つ・2つの両方で指定でき、widthやheightの決まり方もpxと同様です。

↓ちなみに、値を50%とすると画像が横に2つ並んで表示され、下の余った部分に繰り返し表示されました。



画像を繰り返し表示しないようにする

画像が背景を埋め尽くすほど大きくなかった場合に、画像を繰り返し表示しないようにするには、background-repeatの値をno-repeatにすればOKです。



画像を円で切り抜いてみよう

画像を円で切り抜くには、背景をborder-radiusで丸くして、そこにbackground-imageを指定します。


上の例では、border-radius:50%;で正円を作り、そこに背景画像を指定しました。

また、border-radiusについて詳しく説明した記事があるので、参考にしたい方はこちらをどうぞ。

画像の表示位置を変える

先ほどの例では、女性と馬が中心から右にずれて表示されており、この対象を中心に持っていきたかったとします。そのためには、background-positionプロパティを使います。

background-positionで指定できる値はいろいろありますが、ここではpx指定が一番やりやすいでしょう。
値を1つだけ指定すれば左右に画像が移動し、2つ指定すれば、1つ目の値は左右の移動、2つ目の値は上下の移動に対応します。値を2つ指定するときは、カンマ(,)ではなくスペースで区切りましょう。
また、pxの値はプラスの値もマイナスの値もとることができ、プラスを指定すると右や下に移動し、マイナス(例えば「-40px」など)を指定すると左や上に移動します。


↑この例では、左右のみの移動で上下に移動させる必要はないので、値を1つだけ指定し、左に移動させたいので値をマイナスにしました。何回か微調整した結果、いい感じに中央に表示されたのが分かります。

また、上下にのみ画像を移動させたい場合は、1つ目の値に「0」、2つ目の値に移動させたい量を指定すればOKです。