ZeroPlus Media > Web制作 > HTML/CSS > 【CSS】background-imageを使いこなす！背景画像の調整方法を解説　

【CSS】background-imageを使いこなす！背景画像の調整方法を解説　

HTML/CSS

2022/01/14

2024/02/29

Webサイトに表示させた背景画像のサイズや配置を調整する方法はやや複雑です。そのためデザインカンプどおりに背景画像の調整ができず、悩んでしまうかもしれません。

この記事ではCSSプロパティbackground-imageを使用した背景画像の表示方法と、サイズ・配置の調整方法を詳しく紹介しています。最後までお読みいただくとbackground-imageを使いこなせるようになります。

この記事で身につく内容

background-imageの使い方
Webサイトに背景画像を表示させる方法
CSSで背景画像のサイズや配置を調整する方法

プログラミング学習でこのような経験はありませんか？

目標に向けて何を学べば良いかわからない
調べても解決策が見つからない
現場レベルのスキルが身につくのか不安

これらの悩みは、学習環境を整えることで全て解決することができます。

ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。

なんでも相談できる専属メンター
いつでも技術相談ができるプロ講師
元IT企業CTO監修のカリキュラム

条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。

少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。

今すぐZeroPlus Gateの詳細を見る

CSSで背景画像を表示する方法
- 背景画像の表示には相対パスを使う
背景画像の調整に用いる主要な3つのプロパティ
ショートハンドで複数のプロパティをまとめて記述する
背景画像を複数表示させる方法
- 背景画像を重ねる方法
background-size:cover;で背景画像の縦が見切れてしまう場合
まとめ

CSSで背景画像を表示する方法

背景画像を表示させるにはCSSのbackground-image プロパティを使用します。

サンプル画像として高さ1280px × 幅1920pxの画像を用意しました。この画像を背景画像として表示させてみましょう。

HTMLのdivタグにcontainerクラスをつけて、containerに対して背景画像を指定します。

<div class="container"> 
</div>

.container {
　　 　/*背景画像は高さを持たないため、heightの指定が必要*/ 
　　　 height: 1280px; 
      /*相対パスで画像ファイルを指定*/
　　　 background-image: url(../img/background-image.jpg);
}

上記の例ではcontainerの高さを1280pxに指定しています。背景画像自体は高さを持たないため、表示させる要素自体に高さを持たせる必要があります。もし背景画像が表示されない場合には、要素に高さが指定されているか確認してみましょう。

背景画像の表示には相対パスを使う

背景に指定する画像ファイルの指定には、相対パスを使います。

例として下図のようなcodeフォルダ内のstyle.cssファイルから、imgフォルダ内のbackground-image.jpgまでを相対パスで指定すると、../img/background-image.jpgとなります。

パスの書き方について詳しくは、こちらの記事をご参照ください。

相対パスと絶対パスの違いと書き方を学ぼう

かめるん先生

背景画像が表示されないときは、こちらの相対パスが間違っていることが多いです！
もし表示されない！となったらぜひ確認してみましょう！

背景画像の調整に用いる主要な3つのプロパティ

背景画像の調整に用いる主要なプロパティは以下の3種類です。

プロパティ	調整内容
background-size	サイズを調整する
background-position	表示位置を調整する
background-repeat	繰り返し表示を制御する

これらのプロパティを使って、以下のように記述できます。

.container {
    background-image: url(../img/background-image.jpg);
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: contain;
}

まずbackground-imageで背景画像を表示し、3種類のプロパティで調整を行うのが基本です。

1.background-size

background-sizeを使用して背景画像のサイズを調整できます。指定できる値は次のとおりです。

auto（初期値）
contain
cover
値
％

このうちautoは画像ファイルをそのままのサイズで表示させる方法で、ほとんど使用することはありません。ここではautoを除くそれぞれの値の調整内容について解説します。

かめるん先生

background-sizeプロパティは背景画像のトリミングなどによく使いますね！

contain

containを使用すれば画像の縦横比を保ったまま、要素の内側に画像がぴったり収まるサイズに調整できます。

<div class="container"> 
</div>

.container {
    background-color: #ff914d;
    width: 640px;
    height: 640px;
    background-image: url(../img/background-image.jpg);
    background-size: contain;
    background-repeat: no-repeat;/*画像が繰り返すのを防ぐ*/
}

画像の縦横比を保ったまま、全領域が表示されるようにサイズ調整されました。containの特徴として、表示させる要素と背景画像の縦横比が異なる場合は、図のようにスキマができます。

cover

coverを指定すると要素がすき間なく埋まるように、縦横比を保ちながら背景画像を表示できます。

.container{
  　　/*height,width,background-colorコード省略*/
　  　background-image:url(../img/background-image.jpg);
　　  background-size:cover;
　　  background-repeat: no-repeat;/*画像が繰り返すのを防ぐ*/
}

要素に対してすき間なく背景画像が表示されました。要素からはみ出した部分はトリミングされています。要素の背景を画像で覆いたい場合にはcoverを使用しましょう。

px・%による指定

縦と横のサイズを指定して表示する方法です。pxで指定する方法と、％で指定する方法があります。

px指定の場合は指定したピクセルで表示、％指定の場合は親要素の辺の長さを基準にした割合でサイズが計算されます。

値の指定方法	内容
background-size: 値1;	幅と高さに同じ数値を指定する
background-size: 値1 値2;	値1に幅、値2に高さを指定する

たとえばbackground-size: 600px 300px;ならば、幅600px、高さ300pxのサイズ指定になります。

また、片方にautoを設定することで、縦横比が自動計算され、画像の変形を防げます。

.container {
　　/*height, width, background-colorコード省略*/
　　background-image: url(../img/background-image.jpg);
　　background-size: 20% auto;
　　background-repeat: no-repeat;/*画像が繰り返すのを防ぐ*/
}

このようにautoを指定した高さが、横幅のサイズに応じて自動で計算されています。px・%指定では、2つの値のうち片方の値をautoに指定すると、画像の変形を防げるため便利です。

px・％指定は、元の画像の縦横比を守って指定しなければ画像が変形してしまいます。例えば高さ1280px × 横1920px、縦横比40:60のサンプル画像に対し、サイズを横幅20％、高さ60％と指定してみましょう。

.container{
　　  /*height,width,background-colorコード省略*/
　　  background-image:url(../img/background-image.jpg);
　　  background-size:20% 60%;/*横幅を20%、高さを60%に指定*/
　　  background-repeat: no-repeat;/*画像が繰り返すのを防ぐ*/
}

画像が縦長に変形してしまいました。画像が本来の形から変形してしまう場合は、縦か横の片方をautoに設定しましょう。

background-sizeまとめ

background-sizeに指定できる値についてまとめました。

値	調整の内容
auto(初期値)	画像本来のサイズのまま表示させる
contain	画像の縦横比を保ち、要素内に画像の前領域が収まるようにサイズを変更
cover	画像の縦横比を保ち、要素を覆うようにサイズを変更
px	pxで画像サイズを指定
%	要素に対する割合で画像サイズを指定

2.background-position

background-positionを使って背景画像の表示位置を調整できます。

表示位置を指定する方法の種類は以下の3つです。

px指定
％指定
位置を示すワードで指定

それぞれの指定方法について解説します。

かめるん先生

background-positionプロパティは上記background-sizeでトリミングした画像のどのあたりを表示するかという部分でよく使用しますね！

px指定

background-positionをpx指定する場合、値を2つ記述します。要素の左上を起点とし、最初の値で横方向へ、2番目の値で縦方向へ配置位置を調整できます。たとえばbackground-position: 　300px 200px;ならば、親要素の左上を起点として横に300px、縦に200px移動した位置に画像が配置されます。

px指定ではデバイスの幅にかかわらず、表示位置は固定されます。そのためレスポンシブ対応が必要なサイトにおいては不向きな方法です。

％指定

％指定する場合も最初の値で横方向へ、二番目の値で縦方向へ配置位置を調整できます。しかし％指定はpx指定と比較して概念がやや複雑です。

端的に説明すると

画像の左上を起点に、指定した％分移動した位置
要素の左上を起点に、指定した％分移動した位置

以上の2点が重なるポイントに画像が表示されます。

たとえばbackground-position: 50% 50%;ならば、画像の左上から横50%・縦50%へ移動した位置と、要素の左上から横50％縦50％へ移動した位置が重なるポイントに背景画像が表示されます。

％指定の事例をいくつか確認してみましょう。

％指定の概念はpx指定に比べて複雑ですが、レスポンシブ対応にも活用できる便利な手段です。

位置を示すワードで指定

top(上)・bottom(下)・left(左)・right(右)・center(中央)の5つのワードを使い配置を調整できます。それぞれの値を指定したときの、背景画像の表示位置を確認してみましょう。

要素の四つ角に背景画像を指定したい場合はtop・bottom・right・leftのうち2つの値を組み合わせます。

位置を示すワードを2つ指定する場合、その順番を入れ替えても表示結果は同じです。

位置を指定するワードと数値指定を組み合わせることもできます。

位置を示すワードと数値を合わせて記述する場合、値の順番を入れ替えると指定が効かなくなるので注意が必要です。

right・leftは横方向の配置を指定する値なので1番目の値に記述、top・bottomは縦方向の配置を指定する値なので2番目の値に記述しましょう。位置を示すワードの指定はブラウザ幅に合わせ表示位置が可変するため、レスポンシブ対応との相性が良く使いやすいです。

background-positionまとめ

background-positionは、横方向と縦方向の位置を指定するプロパティです。

background-position: 値1（横方向の配置）値2（縦方向の配置）;のように指定します。値には以下の3種類を指定することができます。

px
％
位置を示すワード

background-positonプロパティについては、以下の記事でも解説しています。

【CSS】background-positionで背景画像の表示位置を調整する方法を解説

3.background-repeat

background-repeatを使用して、背景画像の繰り返しを制御することができます。初期値はrepeatで、要素内を埋めるように同じ画像が繰り返し表示されます。

値にno-repeatを指定すると、背景画像の繰り返しを禁止できます。repeat-xは横方向への繰り返し、repeat-yは縦方向への繰り返しを個別に指定可能です。それぞれの値を指定した場合、背景画像がどのように表示されるか確認しましょう。

background-repeatまとめ

background-repeatに指定する値と調整内容を表にまとめています。

値	調整の内容
repeat（初期値）	背景画像を繰り返し表示させる
no-repeat	背景画像の繰り返し表示をキャンセルする
repeat-x	背景画像を横方向にだけ繰り返し表示させる
repeat-y	背景画像を縦方向にだけ繰り返し表示させる

ショートハンドで複数のプロパティをまとめて記述する

backgroundプロパティを使えば、複数のプロパティをまとめて記述可能です。このように複数のプロパティをまとめて記述する方法をショートハンドと呼びます。

かめるん先生

ショートハンドはコード量を少なくできて、便利ですのでぜひ活用してみてください！

.container {
    background-image: url(../img/background-image.jpg);
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: contain;
}

上記のコードを、backgroundを用いて以下のようにすっきりとまとめることができます。

.container {
  　　background: url( ../img/background-image.jpg) no-repeat bottom / contain;
}

それぞれの値を半角スペースで区切って記述することで、ひとつのプロパティで3つ分の指定をすることができます。

ただしbackground-sizeのみ、記述方法に特殊なルールが存在します。background-sizeはbackground-positionの後に「スラッシュ（/）」をつけて記述することがルールです。上記のコードでもルールにならって、bottom / containと記述しています。

背景画像を複数表示させる方法

ここでは応用編として背景画像を複数表示する方法について解説します。

手順は2つあります。

background-imageに2つの画像パスを、カンマ区切りで記述
背景画像を調整するプロパティについても、カンマ区切りで値を記述

実例で確認してみましょう。

.container {
    background-color: #ff914d; width: 640px; 
    height: 230px;
　　/*1.background-imageに2つの画像パスを、カンマ区切りで記述*/
    background-image: url(../img/background-image.jpg),url(../img/simple.jpg); 
   
    /2.背景画像を調整するプロパティについても、カンマ区切りで値を記述*/
    /*2枚の画像の横幅を、いずれもcontainer幅の半分に指定*/
    background-size: 50% auto,50% auto;
    /*1枚目の画像を左上、2枚目の画像を右下に配置*/
    background-position: left top,right bottom;
    /*2枚の画像をいずれも繰り返さないよう指定*/
    background-repeat: no-repeat,no-repeat;
}

containerの中に2つの背景画像を表示させることができました。

背景画像を重ねる方法

次に複数の背景画像を重ねる方法について解説します。2枚の背景画像が重なるようにbackground-positionを変更すればよいです。実例を確認してみましょう。

.container {
    /*background-color、heightコード省略*/
    background-image: url(../img/background-image.jpg), url(../img/simple.jpg);
    background-size: 50% auto, 50% auto;
    /*background-image.jpgを10％右へ移動*/
    background-position: 10% top, bottom right;
    background-repeat: no-repeat, no-repeat;
}

上のように左の画像を右へ10％移動させたため、2枚の背景画像が重なりました。

注目していただきたいのは背景画像が重なる際、先に指定した背景画像が優先的に前面に表示される点です。ここでは先に指定していたbackground-image.jpgが前面になるように重なっています。

背景画像を重ねる際は、前面に表示させたい画像を先に記述するようにしましょう。

背景画像の重なりを利用したデザイン事例

2枚の画像を重ねて実際に背景画像をデザインしていきます。

.container {
　　　width: 340px;
　　　height: 230px;
     background-image: url(../img/walk-man.png), url(../img/simple.jpg);
     background-size: 7% auto, contain;
     background-repeat: repeat-x, no-repeat;
     background-position: 0% 90%;
}

上記のコードをブラウザで確認してみましょう。

男性の画像を先に記述することで、大きなカップの前を行列で歩いているかのようなデザインを作成できました。このように複数の画像を表示することで、背景画像に変化をつけることができます。

background-size:cover;で背景画像の縦が見切れてしまう場合

background-imageプロパティに画像のパスを指定し、background-sizeプロパティで画像の大きさを調整することができます。

ただし、例えばbackground-size:cover;を指定すると、以下のように画面幅が広がった場合、画像の下部分が見切れてしまうことがあります。

<div class="l-container">
    <div class="p-fv"></div>
    <section class="p-section">
      <p>セクションのコンテンツが入ります。</p>
    </section>
</div>

.p-fv {
  width: 100%;
  height: 700px;
  background-image: url(dummy.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.p-section {
  background: orange;
  height: 400px;
  width: 100%;
}

このように、画面幅を2000pxまで広げると画像下部が見切れて表示されてしまいます。

coverで画面いっぱいまで画像を表示しているものの、画像の高さを700pxと指定しているため、画像が700pxの高さを維持したまま横に広がってしまっているのです。

画面幅が広がっても背景画像が見切れないようにレスポンシブ対応するには、以下のように背景画像の高さを0、padding-top: calc( 画像の高さ / 画像の横幅* 100%)と記述を追加します。

このように記述することで、画像の縦横比を保ったまま高さを変化させられるようになります。

.p-fv {
  width: 100%;
  height: 0;
  position: relative;
  /* (画像の高さ ÷　画像の横幅) × 100% */
  padding-top: calc(640 / 1280 * 100%);

  background-image: url(dummy.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

画面幅が広がっても、縦横比を維持したまま画像を見切れることなく表示できました。

画像の高さは0に指定していますが、padding-topを（画像の高さ / 画像の横幅）× 100% として、画像の高さを保持するよう指定しています。また、%を使っているので、画面幅が変わっても比率を保つことができます。

padding-topではなく、aspect-ratioプロパティでも同様のことができます。

.p-fv {
  width: 100%;
  position: relative;
  background-image: url(dummy.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;

  /* (画像の横幅 ÷　画像の高さ)*/
  aspect-ratio: 1280 / 640;
}

aspect-ratioプロパティを使った場合でも、画面幅が広がっても縦横比を維持したまま背景画像を見切れることなく表示することができました。

aspect-ratioプロパティの使い方に関しては以下の記事で解説しています。

aspect-ratioプロパティとは？使い方について解説

まとめ

この記事では背景画像を表示させる方法と、サイズや配置を調整する方法について解説しました。背景画像を表示させるには、background-imageに画像までのパスを指定する必要があります。

背景画像を調整するプロパティは以下の3種類です。

プロパティ	調整内容
background-size	背景画像のサイズを調整する
background-position	背景画像の表示位置を調整する
background-repeat	背景画像の繰り返し表示を制御する

それぞれのプロパティの詳しい使い方については記事内で解説しています。参考にして背景画像の表示にチャレンジしてみてくださいね！

プログラミング学習でこのような経験はありませんか？