【CSS】background-imageで画像表示する方法とは？imgタグとの使い分けについても解説

CSSプロパティのbackground-imageを使うことで、背景画像を表示させることができます。

backgroundには、独自のプロパティが多く、何だかややこしそうですよね。

また、HTMLで指定できる画像とはどう違うのか、どちらを使うべきなのか悩んでいる方も多いのではないでしょうか。

今回は、background-imageを使って画像を表示させたいという方のために、

以上の項目に沿って、解説していきますね。

この記事を読めば、CSSのbackground-imageを使った画像の表示方法や使用する上でのメリットなどがわかるようになりますよ。

ぜひ最後まで読んでくださいね！

background-imageの使い方

CSSのbackground-imageに画像のURLを指定することで、背景画像として表示させることができます。

具体的には以下のようにコードを記述します。

<p>CSSで背景画像を指定</p>
<div class="bg-img"></div>

CSSは以下のように記述します。

.bg-img{
  width: 100%;
  height: 400px;
  background-image: url(sample.jpg);
  background-repeat: no-repeat;
}

background-imageには、画像までのパスを指定していますね。指定した背景画像が表示されているのが確認できたでしょうか？

「background-repeat: no-repeat」は画像を繰り返さない指定です。

後は、要素の横幅と高さのサイズも設定しています。

これらの指定は、背景画像の基本となりますので、必ず覚えておきましょう。

この背景画像をCSSプロパティでさらに調整する方法を紹介していきます。

サイズを指定する

background-sizeでサイズを指定することができます。

値は以下の5つです。

containとcoverは特に間違えやすいですね。

containは、要素内でできる限り大きく表示され、coverは、要素内に空間が余らないようにできる限り小さく表示されます。

実際に実装してみて確かめてみてください。

トリミングをする

「object-fit: cover」を指定することで、画像をトリミングすることができます。

.bg-img{
  width: 150px;
  height: 300px;
  background-image: url(sample.jpg);
  background-repeat:  no-repeat;
  object-fit: cover;
}

上記のコードでは、幅150px、高さ300pxでトリミングされます。

これに加えて、「object-position」を利用することで、位置を調整して好きな場所をトリミングすることもできます。

位置を調整する

background-positionは、画像の位置を調整することができます。

pxや%などの数値で指定するほか、centerやtop、rightなどの位置を単語で設定することもできます。

.bg-img{
  width: 100%;
  height: 400px;
  background-image: url(sample.jpg);
  background-repeat: no-repeat;
  background-position: center center;
}

上記では、縦横ともに中央に背景画像が表示されています。

背景画像を固定する

background-attachmentを使って、背景画像の固定・スクロールをコントロールすることができます。

値は以下の3つです。

具体的に書いてみます。

.bg-img{
  width: 400px;
  height: 100vh;
  background-image: url(sample.jpg);
  background-repeat: no-repeat;
  background-attachment: fixed;
}

上記では、背景画像の位置が固定されるため、スクロールしても移動しません。要素の中にテキストがあるとよりわかりやすいでしょう。

背景画像を複数指定する

背景画像は複数指定し、重ねて表示することができます。

.bg-img {
  width: 100%;
  height:400px;
  background-image: url(sample01.jpg), url(sample02.jpg), url(sample03.jpg);
  background-repeat:  no-repeat, no-repeat, no-repeat;
  background-position: center center, bottom right, top left;
}

上記では背景画像を3つ設定しています。

他のプロパティも3つの値を記述することで、それぞれの背景画像に対して指定を適用させることができます。

backgroundを用いると、画像だけでなく背景色もまとめて指定できます。

background: url(sample01.jpg), url(sample02.jpg), url(sample03.jpg), rgb(205,92,92);

imgタグとの使い分け方について

ここまで、CSSのbackground-imageを使って、背景画像を指定する方法を紹介してきました。

これとは別に、HTMLでは、imgタグを用いて画像を表示させる方法がありますよね。

2つはどのように違うのでしょうか、Webページ内で画像を用いたいときに、どちらのやり方を採用するのが良いのでしょうか？

違いとメリットについて解説していきましょう。

background-imageの使い道とメリット

背景画像という名の通り、background-imageは、装飾目的の画像で使用します。

表示されなかったとしても問題がない画像です。

画像が文章の補足であったり、画像がないと意図が伝わらない、といった場合には使用しない方が良いでしょう。

メリットとしては、例えば、レスポンシブデザインへの対応をしていた場合に、画面の大きさによって、画像が引き延ばされて縦横の比率が変わってしまうといった事態を簡単に防ぐことができます。

background-sizeを使うことで、画像の縦横比は保持されますね。

また、画像の位置や固定（またはスクロール）、トリミングなどの指定も特定のプロパティがあり、デザインがしやすさがあります。

imgタグの使い道とメリット

一方で、HTMLのimgタグを使った方が良い場合もあります。

imgタグには、src属性、alt属性を記述することになっています。

src属性には画像のパス、alt属性には代替テキストを指定します。

<img src="sample.jpg" alt="代替テキスト">

代替テキストは、もし何かしらの理由で画像が表示されなかったときに、代わりに表示されるテキストになります。

代替テキストが用意されている特徴から、必要不可欠な画像は、imgタグを使った方が良いでしょう。

また、Flexboxの機能を使えば、画像と文章を横に並べたりといったデザインも簡単にできるので、画像が重要になる場合には、こちらの方法をおすすめします。

まとめ：背景画像のプロパティを1つずつ覚えていこう

今回は、background-imageを使って、背景画像を指定する方法を解説してきました。

imgタグとの違いと両者のメリットについても説明しましたね。

背景画像には、background-image以外にも便利なプロパティが多くあるので、1つ1つ覚えて使いこなしていきましょう。

今回の記事が参考になれば幸いです。