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

CSSで背景画像のサイズや配置を調整する方法は、少し複雑な面があります。思うように背景画像の調整ができず、悩んでしまうかもしれません。本記事ではCSSプロパティ「background-image」を使用した背景画像の表示方法と、サイズ・配置の調整方法を詳しく解説していますので、ぜひ参考にしてみてくださいね。

無料でプログラミングの質問ができるサービス

30日間無料でWeb制作が学べるZeroPlus Gate！

• Web制作に特化
• 50本以上の動画教材で学べる
• 30日間に4回の学習サポート面談がある
• Slackで質問し放題

公式サイトを見る

ZeroPlus Gate（ゼロプラスゲート）は怪しい？評判・口コミを運営がエゴサしてみた

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

背景画像を表示させるには、CSSプロパティ「background-image」を使用します。以下のサンプル画像を要素「container」の背景に表示させてみます。

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

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

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

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

背景に表示させる画像ファイルを指定するには、相対パスを使うのが一般的です。

下のようにcodeフォルダ内の「style.cssファイル」から、「imgフォルダ内」にある「background-image.jpg」までの相対パスは../img/background-image.jpgと記述します。

パスの書き方について詳しくは、こちらの記事をご参照ください。
相対パスと絶対パスの違いと書き方を学ぼう

かめるん先生

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

背景画像の調整に使う3つのプロパティ

背景画像を調整するときに使う主要なプロパティは以下の3種類です。

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

.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を使用すると背景画像のサイズを調整できます。指定できる値は以下のとおりです。

かめるん先生

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

次から、それぞれの値について解説します。

contain

background-size: 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

background-size:  cover;を指定すると要素がすき間なく埋まるように、アスペクト比を保ちながら背景画像を表示させられます。

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

要素に対してすき間なく背景画像が表示され、はみ出した部分はトリミングされています。

60本の動画で、HTML/CSSを徹底学習

ZeroPlus Gateの詳細を見る

費用の一切かからないプログラミングスクールです

数値指定

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

px指定の場合background-size:  600px  300px;ならば、幅600px、高さ300pxにサイズ調整されます。一方、background-size:  600px;と、値を一つだけ指定する場合、幅は600pxにサイズ指定され、高さは画像のアスペクト比が保たれるように自動計算されて調整されます。

％指定の場合は、親要素の辺の長さを基準にした割合でサイズが計算されます。background-size:  50%;とする場合、要素の幅が640pxなら背景画像の幅は320pxに指定され、高さは画像のアスペクト比を保ったまま調整されます。

高さを基準にサイズを設定したい場合背景画像の高さを基準にサイズを設定するなら、一つ目の値にautoを指定することで、アスペクト比を保持したまま、幅が調整されて表示されます。

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

このように数値指定した高さに応じて、アスペクト比を保持されるように幅が自動計算されます。

数値指定をする場合、元画像のアスペクト比が崩れないように注意が必要

数値指定では、元の画像のアスペクト比を守って指定しなければ、画像が変形してしまう点に注意が必要です。たとえば高さ1280px × 横1920px、アスペクト比40 : 60のサンプル画像に対し、サイズを横幅20％高さ60％に指定してみます。

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

画像が縦長に変形して見栄えが悪くなってしまいました。数値指定でアスペクト比を崩さないようにするには、以下の方法が有効です。

上記の方法を使うと、元画像のアスペクト比を崩さずに数値指定できます。

background-sizeまとめ

background-sizeに指定できる値についておさらいします。

2．background-position：背景画像の位置を調整

「background-position」を使うと、背景画像の表示位置を調整できます。表示位置を指定する方法は以下の3種類です。

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

かめるん先生

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

px指定

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

px指定はデバイスの幅に関係なく表示位置は固定されるため、レスポンシブ対応が必要なサイトにおいては不向きです。

％指定

％指定も最初の値で横方向、二番目の値で縦方向の配置を調整できます。％指定はpx指定に比べて仕組みが複雑ですが、ブラウザ幅に合わせ表示位置が可変されるためレスポンシブ対応に使いやすい方法です。

background-position:  X% Y%;といった形で指定し、要素の左上を基準として幅 X%・高さY%の位置と、背景画像の幅X%・高さY% の位置がそろうように画像が表示されます。

background-position: 50%  50%;とするなら、要素の左上から横50％縦50％の位置と、画像の左上から横50%縦50%の位置が重なるように背景画像が表示されます。

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

無料でプロエンジニアに質問できる環境をあなたのお部屋に

ZeroPlus Gateの詳細を見る

難しいと感じたらすぐ相談して解決しよう

方向を示す値で指定

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種類を指定できます。

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

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

3.background-repeat：背景画像の繰り返しを制御するプロパティ

「background-repeat」を使用して、背景画像の繰り返しを制御できます。何も指定しない状態の初期値repeatでは、要素内を埋めつくすように同じ画像が繰り返し表示されます。

値に「no-repeat」を指定すると、背景画像の繰り返しを禁止できます。「repeat-x」は横方向への繰り返し、「repeat-y」は縦方向への繰り返しを個別に指定可能です。

background-repeatまとめ

「background-repeat」に指定する値と調整内容は以下のとおりです。

プロ講師に質問し放題で安心して学習！

ZeroPlus Gateの詳細を見る

受講できる人数は毎日先着制！

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

CSSプロパティ「background」を使えば、複数のプロパティをまとめて記述できます。現場では多くの場合「background」を使った方法が選ばれる傾向にあるため、しっかり使い方をマスターしましょう。

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

かめるん先生

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

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

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

それぞれの値を半角スペースで区切って記述する方法が基本ですが、background-sizeのみ、background-positionの後に「スラッシュ（/）」をつけて記述するルールがあります。上記のコードでもルールに従って、bottom / containと記述しています。

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

ここでは応用編として背景画像を複数表示する手順を紹介します。

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

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

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

containerの中に2つの背景画像を表示させられました。

背景画像を重ねる方法

次に複数の背景画像を重ねる方法を解説します。2枚の背景画像が重なるようにbackground-positionを変更するのみです。

.container {
  background-color: #ff914d; 
  width: 640px; 
  height: 230px;
  background-image: url(../img/background-image.jpg), url(../img/simple.jpg);
  background-size: 50% auto, 50% auto;
  background-position: 10% top, bottom right;/*background-image.jpgを10％右へ移動*/
  background-repeat: no-repeat, no-repeat;
}

左の画像を右へ10％移動させたため、2枚の背景画像が重なりました。画像が重なる際、先に指定した画像が前面に表示されます。

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

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%;
}

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

男性の画像を先に記述しているため、大きなカップの前を並んで歩いているかのようなデザインを作成できました。このように複数の画像を表示させて、背景画像に変化を付けられます。

60本の動画で、HTML/CSSを徹底学習

ZeroPlus Gateの詳細を見る

費用の一切かからないプログラミングスクールです

（応用篇）background-size: cover;で背景画像の縦が見切れてしまう場合の対処方法

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%;
}

このように、画面幅を2,000pxまで広げると画像下部が見切れて表示されてしまいます。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プロパティとは？使い方について解説

まとめ：背景画像に関する指定はショートハンドを使って書くのが実践的

この記事では背景画像を表示させる方法と、サイズや配置を調整する方法について解説しました。背景画像を表示させるには、background-imageに画像までのパスを指定する必要があります。背景画像のサイズや配置を調整するために使われるプロパティは以下の3種類です。

このように3種類の画像を使いこなして、サイズや配置を調整する必要があります。しかし、backgroundプロパティを使えば、これらのプロパティをすべてまとめて記述できます。

以下のコードをご覧ください。

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

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

それぞれの値を半角スペースで区切って記述する方法が基本ですが、background-sizeのみ、background-positionの後に「スラッシュ（/）」をつけて記述するルールがあります。このようにショートハンドプロパティの「background」を使って書くほうが、短いコードで記述できるため実践的です。この記事を参考に、しっかり使い方をマスターしましょう。

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

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

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

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

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

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

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

今すぐZeroPlus Gateの詳細を見る

\ 学んだことをSNSでシェアしよう /

facebook

X

LINE

ハテブ

Pocket

URL
copy

コピー