【CSS】background-image完全ガイド｜背景画像ずれる・切れる・表示されないお悩み解決

CSSの「background-image」プロパティを使うと、Webサイトの背景画像を表示させたり、サイズや配置を指定したりできます。

この記事では、「background-image」の詳しい使い方を初心者にもわかりやすく解説します。仕組みを理解して、思いどおりに背景画像を表示させましょう。

無料で30日間、Web制作が学べる『ZeroPlus Gate』
プログラミングに関する質問をエンジニアへ「し放題」のサービス！

• Web制作に特化したカリキュラム
• 自分のペースで50本以上の動画教材で学べる
• あなた専属のメンターと作る、あなただけの学習ロードマップ
• 30日間、回数無制限でエンジニアに質問可

公式サイトを見る

ZeroPlus Gateの評判・口コミを徹底調査！無料の理由を運営が解説

背景画像を表示させる基本の書き方

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

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

.container {
  aspect-ratio: 16 / 9; /* 画像の縦横比を保つ */
  background-image: url(../img/background-image.jpg); /* 画像パスを指定 */
  background-size: cover; /* 要素全体を覆うように表示 */
  background-position: center; /* 中央に配置 */
}

従来は、背景画像を表示する要素に height を固定して使うケースが一般的でした。

しかし、ブラウザの幅（ビューポート）が変化すると、要素の高さが一定のままなので、要素の縦横比（アスペクト比）が崩れて背景画像が見切れたり、引き伸ばされたりしてしまいます。

この問題を解決できるのが aspect-ratio プロパティです。
aspect-ratio を指定しておくと、要素のアスペクト比を常に一定に保てるため、画面サイズが変わっても背景画像が自然なバランスで表示されます。

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

背景画像を表示させるにはパス指定が必要

CSSで背景画像を表示するには、background-imageプロパティで画像ファイルの場所（パス）を指定する必要があります。

この指定が正しくないと、CSSがどんなに正しくても画像は表示されません。

パス指定の基本構文

background-image: url(画像ファイルの場所);

たとえば、CSSファイルと同じ階層にある「img」フォルダの中のbackground.jpgを読み込みたい場合は、次のように書きます。

background-image: url(../img/background.jpg);

url()の中に、CSSファイルから見た画像ファイルの位置関係を指定します。

背景画像の指定には相対パスを使うのが一般的

Web制作では、画像の場所を指定する際に相対パスを使うのが一般的です。

相対パスとは「CSSファイルを基準にした画像ファイルまでの位置関係」を示すパスの書き方です。

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

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

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

かめるん先生

背景画像が表示されないときは、相対パスが間違っていることが多いです！

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

背景画像をきれいに表示するためには、サイズ・位置・繰り返しを調整する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;/*画像が繰り返すのを防ぐ*/
}

アスペクト比を保ったまま背景画像が表示されるように調整されました。要素と画像のアスペクト比が異なる場合、背景にすき間ができます。

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で指定する方法と％で指定する方法があります。

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;/*画像が繰り返すのを防ぐ*/
}

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

元画像のアスペクト比が崩れないように注意

数値指定では、元の画像のアスペクト比を守らないと、画像が変形してしまいます。アスペクト比40 : 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指定はデバイスの幅に関係なく表示位置が固定されるため、レスポンシブ対応（※）が必要なサイトにおいては不向きです。

※レスポンシブ対応：スマホ・タブレット・PCなど、画面サイズの異なるデバイスでもレイアウトが自動的に最適化されるように設計すること

％指定

％指定も最初の値で横方向、二番目の値で縦方向の配置を調整できます。

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プロパティを使って、背景画像に関する複数の指定を1行にまとめて書けます。

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

かめるん先生

実務の現場でも、可読性とメンテナンス性を高めるためにショートハンドがよく使われます。

.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. そのほかのプロパティ（background-size, background-position, background-repeatなど）も、画像の数に合わせてカンマで区切って値を指定

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枚の画像をいずれも繰り返さないよう指定*/
}

背景画像を重ねる方法

画像を重ねたい場合は、位置指定（background-position）を調整するだけでOKです。

.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の詳細を見る

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

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

背景画像は以下の3つのプロパティを使って表示のさせ方を指定できます。

これらのプロパティをまとめてショートハンドで記述するのが、より実践的です。

.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」を使うと効率的です。ぜひ使い方をマスターしましょう。

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

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

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

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

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

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

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

今すぐZeroPlus Gateの詳細を見る

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

facebook

X

LINE

ハテブ

Pocket

URL
copy

コピー