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

2024.01.03
background-imageで画像表示する方法とは

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

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

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

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

  • background-imageとは
  • 背景画像を調整する方法について
  • imgタグとの使い分け方

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

この記事を読めば、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つです。

  • auto(初期値):自動的に算出される
  • contain:縦横比を保持したまま、画像全体が要素内に収まるように調整
  • cover:縦横比を保持したまま、要素を覆うように調整
  • 長さ(pxなど):画像の横幅・高さを指定
  • パーセンテージ(%):要素に対して画像の横幅と高さを指定

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つです。

  • scroll:画面のスクロールとともに移動する
  • fixed:スクロールせずに、固定される
  • local:指定の要素内で固定される

具体的に書いてみます。

.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つ覚えて使いこなしていきましょう。

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

\プログラミングスクールを比較/

DMM WEBCAMP

COACHTECH

RUNTEQ

DMM WEBCAMP COACHTECH RUNTEQ
目指せる姿 WEBエンジニアへの転職
フリーランスエンジニア WEBエンジニアへの転職
分割払い
補助金 ×
転職保証 × ×
受講期間 12週間〜 3ヶ月〜 5ヶ月〜
特徴 【IT業界の転職を一番に考えたい方向け】
大手DMMが運営のプログラミングスクール
転職成功率98.8%
豊富なキャンペーンや補助金制度あり
【フリーランスを目指したい方向け】
フリーランスのエンジニアを最短で目指す
エンジニアと共に実際の案件開発を担当
【とことん勉強してから転職したい方向け】
1,000時間(約9カ月)のカリキュラムでしっかり勉強
企業の求める即戦力のWEBエンジニアを目指す
料金 329,350円〜
※給付金適用後
42万9,000円~ 55万円

公式HP

公式HP

公式HP

関連記事

資料請求

  • 短期集中で最速エンジニア転職を実現-転職成功者インタビュー一覧

    DMM WEBCAMPでは転職成功率98%を実現しています。本資料では、元警察官や元ラーメン屋など様々なバックグラウンドを持つ卒業生の声をお届けします。

    資料をダウンロードする
  • IT技術がもたらす3つの変化と身につけるべきスキル

    IT技術の発展により、今後10~20年程度で47%の仕事がなくなると言われています。どのような変化が訪れ、私達はどのようなスキルを身につけるべきかを解説します。

    資料をダウンロードする
  • 未経験がフリーランスエンジニアになる方法-年収アップで自由な働き方を手に入れる

    働き方改革やリモートワークの影響でフリーランスという働き方の人気は高まりつつあります。フリーランスエンジニアとして活躍するために必要な情報をお届けします。

    資料をダウンロードする

© 2024 WEBCAMP MEDIA Powered by AFFINGER5