CSS3 背景

CSS3 では、背景要素の制御をより細かく行うための新しいプロパティがいくつか追加されました。本セクションでは、複数の背景画像の設定、背景サイズの変更、背景の描画領域の指定方法について解説します。

1. マルチ背景画像（Multiple Backgrounds）

CSS3 では、1 つの要素に複数の背景画像を追加することが可能です。

1.1 マルチ背景の実装

異なる背景画像はカンマ（,）で区切って指定します。最初に指定した画像が一番手前（ユーザーに最も近いレイヤー）に表示されます。

#example1 {
  /* 2つの画像を背景として指定 */
  background-image: url(img_flwr.gif), url(paper.gif);
  background-position: right bottom, left top;
  background-repeat: no-repeat, repeat;
  padding: 15px;
}

背景画像ごとに個別のプロパティ（background-position や background-repeat など）を設定できるほか、background ショートハンドプロパティを使用して一括で指定することも可能です。

#example1 {
  /* ショートハンドによる一括指定 */
  background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
  padding: 15px;
}

2. CSS3 background-size プロパティ

background-size プロパティを使用すると、背景画像のサイズを指定できます。CSS3 以前は、背景画像は画像本来のサイズで表示されていましたが、現在は自由に変更可能です。

サイズは、ピクセル（px）、パーセンテージ（%）、またはキーワード（contain, cover）で指定します。

2.1 背景画像のリサイズ例

背景画像を元のサイズより小さくリサイズする例です。

/* 元の画像サイズより小さく指定 */
#div1 {
  border: 1px solid black;
  background: url(img_flwr.gif);
  background-size: 100px 80px;
  background-repeat: no-repeat;
  padding: 15px;
}

2.2 contain キーワードの活用

contain キーワードを使用すると、画像のアスペクト比（縦横比）を維持したまま、背景領域内に画像が完全に収まる最大サイズまで拡大・縮小されます。

div {
  background: url(img_flwr.gif);
  background-size: contain;
  background-repeat: no-repeat;
}

2.3 cover キーワードの活用

cover キーワードを使用すると、画像のアスペクト比を維持したまま、背景領域全体を覆い尽くす最小サイズまで拡大・縮小されます。そのため、画像の一部がはみ出して表示されない場合があります。

div {
  background: url(img_flwr.gif);
  background-size: cover;
  background-repeat: no-repeat;
}

3. CSS3 background-origin プロパティ

background-origin プロパティは、背景画像を描画する際の基準点（背景画像がどこから始まるか）を指定します。

このプロパティには以下の 3 つの値を指定できます。

• border-box：境界線（ボーダー）の外縁から背景を描画。
• padding-box：パディングの外縁（ボーダーの内側）から背景を描画（デフォルト）。
• content-box：コンテンツ領域の内側から背景を描画。

#example1 {
  border: 10px dotted black;
  padding: 35px;
  background: url(img_flwr.gif);
  background-repeat: no-repeat;
  /* コンテンツ領域を基準に配置 */
  background-origin: content-box;
}

4. CSS3 background-clip プロパティ

background-clip プロパティは、背景の描画範囲（ペイント領域）を制限するために使用されます。

• border-box：境界線（ボーダー）を含めて背景を描画（デフォルト）。
• padding-box：パディング領域まで背景を描画（ボーダーの下には描画しない）。
• content-box：コンテンツ領域のみに背景を描画。

#example1 {
  border: 10px dotted black;
  padding: 35px;
  background: yellow;
  /* パディング領域までで背景色をカット */
  background-clip: padding-box;
}

5. CSS3 背景プロパティ一覧