ほんっとにはじめての HTML5 と CSS3

前回に引き続き backgroundについて。
今回は background-size について詳しく見てみましょう。

1. background-sizeプロパティ
   1. background-sizeの値は1〜2個
   2. 画像を複数使った場合の background-size の指定は？
   3. キーワードでの指定
   4. %での指定
   5. 数値でpxやemなどの単位を付けて指定

backgroundについての記事は5回に分けています。

【15-1】background関連のプロパティ（1/4）

backgroundのプロパティと値の一覧／background-color／background-image／background-repeat／background-attachment

【15-2】background関連のプロパティ（2/4 background-position）

background-position

【15-3】background関連のプロパティ（3/4 background-size）　←今ココ

background-size

【15-4】background関連のプロパティ（4/4 clip と origin）

background-clip／background-origin

【15-5】backgroundのショートハンド まとめ

たくさんあるbackgroundのプロパティを一括でまとめられます

background-sizeプロパティ

background-sizeは 背景画像のサイズを指定します。
CSS3からキーワード「contain」「cover」が追加され、画像を背景領域にピッタリ収める自動サイズ調整が使えるようになりました。

background-size の値
auto	デフォルト値。画像の縦横比を保つようにサイズを自動計算します。
contain	画像の縦横比を保ったまま、背景領域に収まる最大サイズに調整。画像全体を表示。 画像が no-repeatなら画像で覆われない領域は背景色が出る。 （containは含有って意味。画像を切らずに全部含むってこと）
cover	画像の縦横比を保ったまま、背景領域に収まる最小サイズに調整。領域の幅か高さの小さいほうに画像の幅か高さを合わせて全体を覆うので、画像がトリミングされます。 （coverはカバー。画像で領域全部をカバーするってこと） ↑これは background-position: center の場合
%	画像に対してのパーセンテージで指定
数値	px や em などの単位をつけて画像のサイズを指定

値の継承	なし	適用できる要素	全部

background-sizeの値は1〜2個

background-sizeプロパティの値は、1〜2個の値を「半角スペース」で区切って指定します。

キーワード「contain」「cover」以外の値で、値が2つのときは「画像の幅」「高さ」の順になります。

このとき 値を1個にすると、省略された2つめの値（=高さ）は「auto」に勝手に決まります。

これちょっといつもと違うよね！　値が１つだと2つとも同じ値なのがいつものパターンだけど、これは2コ目はautoなのね。
「background-size: 100% auto」なんて書かなくても「background-size: 100%」でイイということですね。覚えておかなきゃ。（まあ「100% auto」でもエラーにゃならんけどねw）

キーワード「contain」「cover」は、値は1個だけ書きます。このキーワードには幅と高さを別々に指定する概念は無いんで。

例えば「background-size: contain 100%」なんて指定すると、ブラウザはこの background-size の指定そのものを無視して、デフォルトの background-size: auto になります。

画像を複数使った場合の background-size の指定は？

画像を複数使った場合の background-sizeの指定は、それぞれの画像のサイズをカンマで区切って指定することができます。
順序はbackground-imageで指定したのと同じで、上になっている画像から指定します。

複数の画像にbackground-sizeを指定した例。

p{
   background-image:url(images/05.jpg),url(images/bg04.gif);
   background-size:auto,cover;}

今回のサンプルも、前回と同様、以下の2つの背景画像を使っています。
下になっているのはグリッドの画像（bg04.gif　280×160px）。グリッドは20px。

上に乗っているのはこの画像（05.jpg　260×140px）です。

では、サンプルを順に確認してみましょう。

キーワードでの指定

キーワード「auto」「contain」「cover」を試してみます。
background-position は指定していないので、デフォルト値の「0 0」。背景領域と画像の左上の角がピッタリあった状態です。

キーワードでの指定のサンプルです。
サイズ指定が1つ分だと、複数画像全部に同じ指定が効きます。

上のサンプルの HTMLはこちら。

<div id="smp1_1">
<p>デフォルト（auto）</p>
<p>contain</p>
<p>cover</p>
ここから↓2つの画像を別々にサイズ指定。「,」で区切っています。
<p>auto,contain</p>
<p>contain,cover</p>
</div>

CSSはこちら。

div#smp1_1 {margin:0; padding:0;}
div#smp1_1 p {
	width:300px;
	height:200px;
	line-height:200px;
	text-align:center;
	font-weight:bold;
	color:white;
	margin:0 0 1em;
	background-color:#ddd;
	background-image:url(images/bg05.jpg),url(images/bg04.gif);
	background-repeat:no-repeat;}  /*画像の繰り返しは無しにしています*/
div#smp1_1 p:nth-child(1) {background-size:auto;}
div#smp1_1 p:nth-child(2) {background-size:contain;}
div#smp1_1 p:nth-child(3) {background-size:cover;}
div#smp1_1 p:nth-child(4) {background-size:auto,contain;}
div#smp1_1 p:nth-child(5) {background-size:contain,cover;}

縦横サイズとも auto だと原寸ですね。（いちばん最初の「デフォルト（auto）」）
background-sizeを書かなければ、デフォルト（auto）の、この原寸になってるってことですね。

cover は、レスポンシブレイアウトの背景画像に使うと、とても便利です。
以前の記事でサンプルを作っていますので、こちらもご覧ください。
（まだ紹介していない backgroundのショートハンドを使っていますが）
記事本編：【7-2】CSS3の新しい単位 vw, vh, vmin, vimax について
サンプル： vhを使ったレスポンシブレイアウト

ちなみに、サンプルで「p:nth-child(2)」というセレクタを使っていますが、これは「2番目のp要素」をセレクタにする という意味の擬似クラスです。
詳しくは【3】id とか classって何？（セレクタの「種類」を知っておこう）をご覧ください。

%での指定

背景領域の幅や高さに対するパーセンテージで、画像の幅や高さを決めます。

%の値は、半角スペース空きの2つの値で「幅、高さ」の順で別々に指定できます。
2つめの値（=高さ）を省略すればそれは勝手に auto になります。

%での指定のサンプルです。
background-position は指定していないので、デフォルト値の「0 0」。背景領域と画像の左上の角がピッタリあった状態です。
サイズ指定が1つ分だと、複数画像全部に同じ指定が効きます。

サンプルのCSSです（HTMLは最初のサンプルと同じ構成です）

div#smp1_2 {margin:0; padding:0;}
div#smp1_2 p {
	width:300px;
	height:200px;
	line-height:200px;
	text-align:center;
	font-weight:bold;
	color:white;
	margin:0 0 1em;
	background-color:#ddd;
	background-image:url(images/bg05.jpg),url(images/bg04.gif);
	background-repeat:no-repeat;}  /*画像の繰り返しは無しにしています*/
div#smp1_2 p:nth-child(1) {background-size:100%;}
div#smp1_2 p:nth-child(2) {background-size:auto 100%;}
div#smp1_2 p:nth-child(3) {background-size:70% 100%;}
div#smp1_2 p:nth-child(4) {background-size:80%,200% 100%;}
div#smp1_2 p:nth-child(5) {background-size:auto 70%,100%;}

このサンプルは、背景領域も背景画像も横長のシルエットなので、background-size:100%（100% autoってことね）は contain と同じになり、background-size:auto 100% は cover と同じになりますね。背景領域や画像の縦横比によって違ってきますけどね。

数値でpxやemなどの単位を付けて指定

pxやemなどの単位を付けた数値で、細かくサイズを指定することもできます。
数値でも、半角スペース空きの2つの値で、幅と高さを別々に指定できます。
2つめの値（=高さ）を省略すれば勝手に auto になります。

数値での指定のサンプルです。
このサンプルでは、下になる画像をこちら（24x24px）に変えて、この画像だけリピートさせています。
background-position は指定していないので、デフォルト値の「0 0」。背景領域と画像の左上の角がピッタリあった状態です。

サイズ指定が1つ分だと、複数画像全部に同じ指定が効きます。

サンプルのCSSです（HTMLは最初のサンプルと同じ構成です）

div#smp1_3 {margin:0; padding:0;}
div#smp1_3 p {
	width:300px;
	height:200px;
	line-height:200px;
	text-align:center;
	font-weight:bold;
	color:white;
	margin:0 0 1em;
	background-color:#ddd;
	background-image:url(images/bg05.jpg),url(images/bg04.gif);
	background-repeat:no-repeat,repeat;} /*上の画像は繰り返し無し、下は繰り返し*/
div#smp1_3 p:nth-child(1) {background-size:5em;}
div#smp1_3 p:nth-child(2) {background-size:150px 100px;}
div#smp1_3 p:nth-child(3) {background-size:auto 10em,12px;}
div#smp1_3 p:nth-child(4) {background-size:auto 70%,1em 2em;}
div#smp1_3 p:nth-child(5) {background-size:300px,20px;}

このサンプルのように、複数の画像の元のサイズの差が大きい場合は、別々にサイズ指定するのは必須ですね。

グラデーションを background-size で小さくしてタイリングすると、このように水玉や縞模様のパターンを作ることができます。

作り方は、[18-5] 水玉、ボーダー、チェック柄を作ろう（background-size）をご覧ください。

次回予告

次回は background-clip と background-origin について。
background-clipは、色や画像をどこまで塗る（貼る）かの範囲を決めるもの。
background-originは、画像をどこから始めるかの基点を決めるプロパティです。
要素に border や padding がある場合、それをどこまで背景範囲に含めるか、背景の基点をどこから始めるか、などを細かく指定できます。

関連記事

• 【17-2-1】display:list-itemでリスト関連じゃない要素をリストっぽく
• 【17-1】displayプロパティでボックスの表示形式を自由に変えよう
• （ちょっとメモ）スマホで background-attachment: fixedが効かない場合の対処法
• 【16-2】下限の min-width, min-height 上限の max-width, max-height
• 【16-1】幅の width、高さの heightプロパティ
• 【15-5】backgroundのショートハンド まとめ
• 【15-4】background関連のプロパティ（4/4　clip と origin）
• 【15-3】background関連のプロパティ（3/4　background-size）
• 【15-2】background関連のプロパティ（2/4　background-position）
• 【15-1】background関連のプロパティ（1/4）
• 【14】borderとよく似た outlineはレイアウトを崩さない
• 【13-2】border-imageと border-imageのショートハンド
• 【13-1】borderと borderのショートハンド
• 【12】paddingと paddingのショートハンド
• 【11-4】marginの相殺（margin collapsing）