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

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

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

最短でフリーランスを目指すあなたへフリーランスとして稼ぐためには、ヒアリング力や営業力など幅広いスキルを身につける必要があります。技術を伸ばすのみでは案件が取れない、クライアントさんの要望に応えられない、といった状況に陥るかもしれません。

フリーランス特化型プログラミングスクールZeroPlusならば営業からデザイン、コーディングまで、独立後必要となるスキルを全て身につけられます。

まずはフリーランスを目指すうえでの悩みや疑問を、ZeroPlusの無料相談会でご相談ください。

＼お申し込みは30秒で終わります。／

無料相談会を受けてみる

フリーランスについて専門性の高いメンターが、質問にお答えいたします。今後のキャリア形成にぜひお役立てください！

背景画像の表示方法

背景画像を表示させるにはCSSプロパティのbackground-imageを使用します。サンプル画像として高さ1280px × 幅1920pxの画像を用意しました。

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と記述します。

style.cssから一階層上に上がるので../を書き、imgフォルダから一階層下がるので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種類のプロパティで調整を行うのが基本です。

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

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

ショートハンドを用いることでコードがシンプルになりました。各値を半角スペースで区切って記述します。

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

次からは背景画像を調整するプロパティについて、詳しく解説していきます。

1.background-size

background-sizeを使用すると、背景画像のサイズを調整できます。

指定できる値には下記の種類が存在します。

• auto（初期値）
• contain
• cover
• 値
• ％

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

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・%による指定

background-sizeをpx指定する方法と、％指定する方法があります。px指定と%指定においては、いずれも2つまで値を指定できます。

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

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

画像が縦長に変形してしまいました。とはいえ、縦横比を指定の都度、計算するのは手間がかかりますよね。

この場合に有効な手段として、2つの数値のうち片方をautoに指定する方法があります。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に指定すると、画像の変形を防げるため便利です。

background-sizeまとめ

background-sizeに指定できる値について、調整内容を下の表で確認しましょう。

2.background-position

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

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

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

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

px指定

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

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

％指定

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

端的に説明すると

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

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

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

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

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

位置を示すワードで指定

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

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

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

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

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

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

background-positionまとめbackground-positionに指定できる値には、以下の種類があります。

• 値
• ％
• 位置を示すワード

background-positionは、上記の指定方法のなかから最大2つの値を組み合わせて配置を調整できます。

background-position:値1（横方向の配置） 値2（縦方向の配置）;

3.background-repeat

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

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

background-repeatまとめbackground-repeatに指定する値と調整内容を表で確認しましょう。

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

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

手順は2つあります。

1. background-imageに2つの画像パスを、カンマ区切りで記述
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-imageに相対パスを指定する必要があります。

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

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

\ 完全無料のプログラミンスクール /

30日間で学びきれる
プログラミングスクールZeroPlus Gate

完全無料のプログラミングスクール 30日間でWebサイトが作れるようになる 50本以上の動画教材をいつでも視聴可能 毎週専属メンターとの面談で悩みを解決 現役エンジニアに質問し放題

公式サイトはこちら

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

facebook

Twitter

LINE

ハテブ

Pocket

URL
copy

コピー