コンテンツの内容としての画像を配置するにはimg要素を使用しますが、デザインや装飾のための画像はCSSを使って背景画像として配置します。単に要素の背景に画像を表示するだけでなく、意図した通りに画像を配置したり、画像のサイズや位置などをコントロールするための様々な関連するプロパティを組み合わせて使いこなす必要があります。

ここでは要素の背景画像の指定だけではなく、配置やサイズを調整するためのプロパティも合わせて理解しておきましょう。

背景に画像を指定する – background-imageプロパティ

要素の背景に画像ファイルを背景に指定するには、background-imageプロパティを使用します。値には「url(“画像ファイルへのパス”)」という形式で配置する画像を指定します。画像ファイルへのパスには、絶対パスでも相対パスでも指定することができます。

相対パスと絶対パスについてもっと詳しく見る

body {
    background-image: url("画像へのファイルパス");
}

背景画像はその配置方法をコントロールするプロパティの規定値によって、左上を起点に、縦方向、横方向双方に繰り返し表示され、要素の背景をすべて埋めます。背景画像が表示される範囲はコンテンツの領域とパディングの領域で、境界線（ボーダー領域）は含みません。

次のコードは要素の背景にbackground-imageプロパティを使って背景画像を指定しています。

body {
    background-image: url("bg.png");
}

background-imageプロパティだけを指定すると背景画像は表示領域を覆うように繰り返し表示されます。

背景の繰り返しを指定する – background-repeatプロパティ

背景画像を配置すると、通常縦横方向ともに繰り返し表示されます。これは背景画像の繰り返しを指定するbackground-repeatプロパティによって変更することができます。

body {
    background-repeat: 繰り返し方を指定するキーワード;
}

背景画像が縦横方向ともに繰り返し表示されるのは、background-repeatプロパティの規定値が縦方向にも横方向双方に繰り返し表示させる「repeat」という値が指定されているからです。
値に指定できるキーワードには以下の4つがあります。

no-repeat

no-repeatを指定すると、背景画像を繰り返さず1つだけ配置されます。

body {
    background-image: url("bg.jpg");
    background-repeat: no-repeat;
}

repeat-x

repeat-xを指定すると、X軸方向（横方向）に画像が繰り返し配置されます。

body {
    background-image: url("bg.png");
    background-repeat: repeat-x;
}

repeat-y

repeat-yを指定すると、Y軸方向（縦方向）に画像が繰り返し配置されます。

body {
    background-image: url("bg.png");
    background-repeat: repeat-y;
}

背景の表示位置を指定する – background-positionプロパティ

「background-position」プロパティとは背景画像の表示開始位置を指定するプロパティです。背景画像の位置を指定する値には、1つ、あるいは2つ指定します。

background-position: 位置;

キーワードで指定

位置の指定は配置する辺をキーワードで指定することができます。指定できるキーワードは以下の５つです。

2つキーワードを組み合わせて指定

２つのキーワードを組み合わせて使うことができます。例えば、bottomとrightを組み合わせて使うと、背景画像を表示領域の右下端に揃えて配置することができます。

次の例では、background-positionプロパティの値に2つのキーワード「bottom right」を指定しています。

body {
    background-image: url("bg.png");
    background-repeat: no-repeat;
    background-position: bottom right;
}

キーワードを１つだけで指定

キーワードを１つだけ指定した場合は、指定した軸方向と異なる軸方向の位置はcenterを指定したことになります。

top、bottomのY軸方向（縦）の位置を指定するキーワードを１つだけ指定した場合、X軸方向（横）の位置がcenterになり中央に配置されます。
left、rightのX軸方向（横）位置を指定するキーワードを１つだけ指定した場合、Y軸方向（縦）の位置がcenterになり中央に配置されます。
centerを１つだけ指定した場合は、X軸・Ｙ軸方向（縦横）とも中央に配置されます。

次の例では、background-positionプロパティの値に1つのキーワード「top」を指定しています。

body {
    background-image: url("bg.png");
    background-repeat: no-repeat;
    background-position: top;
}

topとbottom、leftとrightは一緒に使うことができません。これらを組み合わせて使うとbackground-positionプロパティの指定は無効になります。

数値で指定

数値やパーセント値での指定では、基準位置が要素の左上端を起点に配置されます。

２つの値を指定する場合、スペースで区切って値を2つ指定します。1つ目の値はX軸方向（横）の位置、2つ目の値はY軸方向（縦）の位置を指定します。

1つだけ値を指定した場合、その値はX軸方向（横）の位置に対して指定されたことになり、縦の位置は自動的に中央に設定されます。

pxで指定

pxで指定した場合、表示領域の左上端から、背景画像の左上端がどの位置にあるかを指定していることになります。

次の例では、background-positionプロパティで背景画像の位置をX軸方向（横）の位置100px、Y軸方向（縦）の位置50pxに配置されるように指定しています。

body {
    background-image: url("bg_pic.jpg");
    background-repeat: no-repeat;
    background-position: 100px 50px;
}

パーセント値で指定

パーセント値で指定した場合、pxで指定した場合とは少し異なります。値を「X% Y%」といった形で指定し、表示領域の左上端を基準として横X%・縦Y%の位置に、背景画像の幅X%・高さY% の位置が重なるように画像が配置されます。

次の例では、background-positionプロパティで背景画像の位置をX軸方向（横）の位置40%、Y軸方向（縦）の位置60%に配置されるように指定しています。

body {
    background-image: url("bg_pic.jpg");
    background-repeat: no-repeat;
    background-position: 40% 60%;
}

キーワードと数値を組み合わせた辺からのオフセット値の指定

キーワードと数値を組み合わせて、各辺からのオフセットされた位置に配置することができます。オフセット位置を指定するには4つの値で指定することができます。4つの値には以下のように指定しなければ正しく表示されません。

• １つ目の値：キーワード（必ずキーワードでなければなりません）
• ２つ目の値：１つ目の値で指定した辺からのオフセット数値
• ３つ目の値：キーワード（必ずキーワードでなければなりません）
• ４つ目の値：３つ目の値で指定した辺からのオフセット数値

次の例では、下辺から50ピクセル上に、右辺から100ピクセル左の位置に背景画像は配置されます。

body {
    background-position: bottom 50px right 100px;
}

また、3つの値でもオフセット位置を指定することもできますが、4つの場合と異なり以下のように指定しなければなりません。

• １つ目の値：キーワード（必ずキーワードでなければなりません）
• ２つ目の値：１つ目の値で指定した辺からのオフセット数値か、キーワード
• ３つ目の値：２つ目の値が辺からのオフセット数値の場合は、キーワード（必ずキーワードでなければなりません）。２つ目の値がキーワードの場合は、２つ目の値で指定した辺からのオフセット数値

背景画像の大きさを指定する – background-sizeプロパティ

background-sizeプロパティは背景画像の大きさを調整するためのプロパティです。背景画像を表示領域より大きいサイズに指定しても、背景の表示領域からはみ出すことはありません。
値には画像の幅と高さ、または背景の表示領域を埋める方法のキーワードを指定することができます。

body {
    background-size: 画像の幅 画像の高さ;
}

background-sizeプロパティには以下のような値が指定できます。

背景画像のサイズは初期設定では「auto」になっていて、要素の大きさに関係なく、指定した画像の本来のサイズのまま表示されます。

キーワードで指定

background-sizeプロパティに指定できるキーワードには「contain（コンテイン）」と「cover（カバー）」があり、どちらも縦横比（アスペクト比）を保ったまま、背景画像の表示領域内にぴったりと収まるように拡大・縮小する指定方法です。これらにはそれぞれ表示する際に、表示領域を埋めるのに余白を残さずにトリミングするかどうかの違いがあります。

containで指定

containは、背景画像が表示領域内に収まるように拡大・縮小するときに、画像が切れる（トリミングされる）ことなく全体を表示させたい場合に使います。このとき、領域の縦か横のどちらかに合わせて表示されるため、余白（隙間）ができることがあります。

次に例では、正方形の領域に縦横比の異なる画像をcontainを指定して表示しているので、背景領域に余白ができています。

div {
    width: 300px;
    height: 300px;
    background-image: url("bg_pic.jpg");
    background-repeat: no-repeat;
    background-size: contain;
    border: solid 1px #000000;
}

coverで指定

coverは、背景画像が表示領域全体を余白なく覆うように表示したい場合に使用します。表示領域に余白ができないようにするために、要素と背景画像の縦横比が異なる場合、はみ出た部分は切り取られ（トリミングされ）されてしまいます。

次に例では、正方形の領域に縦横比の異なる画像をcoverを指定して表示しているので、背景領域に余白はありませんが、画像が表示領域からはみ出て切り取られています。

div {
    width: 300px;
    height: 300px;
    background-image: url("bg_pic.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    border: solid 1px #000000;
}

数値で指定

単位をpxや%で数値を指定する場合、スペースで区切って2つの値を設定することで、画像の横幅・高さをそれぞれ別に指定することができます。

2つの値を指定するとき、どちらかを「auto」に指定することができます。autoには、数値で指定された方の値に合わせて画像の本来の縦横比を保ったまま拡大縮小されます。

値を1つだけ指定することもできます。これは画像の幅を指定したことになり、高さにはautoを指定したのと同じになります。

数値には負の値を指定することはできませんので注意しましょう。

ピクセルで指定

ピクセルで指定した場合、背景画像は要素のボックス領域の大きさに影響されず、指定したピクセルサイズで表示されます。

次の例では、pxを単位に数値を一つだけと指定しています。

div {
    width: 300px;
    height: 300px;
    background-image: url("bg_pic.jpg");
    background-repeat: no-repeat;
    background-size: 200px;
    border: solid 1px #000000;
}

パーセント値で指定

パーセント値で指定した場合、元の画像の大きさに対する割合ではなく、要素の大きさに対する割合を指定したことになります。

div {
    width: 300px;
    height: 300px;
    background-image: url("bg_pic.jpg");
    background-repeat: no-repeat;
    background-size: 20%;
    border: solid 1px #000000;
}