CSS3 には、要素の背景をより柔軟に制御することを可能にする、新たないくつかの background プロパティが含まれています。
この章では、1 つの要素に複数の背景画像を追加する方法を学習します。
次の新しい CSS3 プロパティについても学習します：
background-sizebackground-originbackground-clip表中の数字は、完全にプロパティをサポートした最初のブラウザのバージョンです。
数字の後に続く -webkit-、-moz- または -o- は、接頭辞付きで動作した最初のバージョンです。
| プロパティ | |||||
|---|---|---|---|---|---|
| background-image (複数の背景を持つ) |
4.0 | 9.0 | 3.6 | 3.1 | 11.5 |
| background-size | 4.0 1.0 -webkit- |
9.0 | 4.0 3.6 -moz- |
4.1 3.0 -webkit- |
10.5 10.0 -o- |
| background-origin | 1.0 | 9.0 | 4.0 | 3.0 | 10.5 |
| background-clip | 4.0 | 9.0 | 4.0 | 3.0 | 10.5 |
CSS3 は、background-image プロパティを通して、1 つの要素へ複数の背景画像を追加することを可能にします。
異なる背景画像はカンマで区切ります。画像は、最初の画像がビューワーの一番手前に来るように互いの上に積み重ねられます。
次の例には 2 つの画像があり、最初の画像は花（右下隅に配置）で、2番目は紙状の背景（左上に配置）です：
#example1 {
background-image: url(img_flwr.gif), url(paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
}
Try it Yourself ❯
複数の背景画像は、個々に background プロパティ（上のように）を指定するか、または background ショートハンドプロパティ
を使用して指定することができます。
次の例は、background ショートハンドプロパティ使用しています（結果は上の例と同じです）：
#example1 {
background: url(img_flwr.gif) right bottom
no-repeat, url(paper.gif) left top repeat;
}
Try it Yourself ❯
CSS3 background-size プロパティは、背景画像のサイズ指定を可能にします。
CSS3 以前では、背景画像のサイズは実際の画像サイズでした。 CSS3 では、異なるコンテキストでの背景画像の再利用が可能です。
サイズは、ピクセルかパーセント、または 2 つのキーワード contain か cover の 1 つを使用して指定できます。
次の例は、元の画像よりもはるかに小さい背景画像にサイズを変更します（ピクセルを使用して）：
元の背景画像：
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
リサイズした背景画像：
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
コードは以下の通り：
#div1
{
background: url(img_flower.jpg);
background-size: 100px 80px;
background-repeat: no-repeat;
}
Try it Yourself ❯
background-size に対する指定可能な他の 2 つの値は、contain と cover です。
contain キーワードは、可能な限り大きい背景画像に調整します（しかし、幅と高さの両方がコンテンツエリア内に
収まる必要があります）。
このように、背景画像と背景配置エリアの割合に応じて、一部、背景画像にカバーされない背景領域があるかもしれません。
cover キーワードは、コンテンツエリアが 背景画像で完全に覆われるように、背景画像を拡大縮少します
（幅と高さは、コンテンツエリアと等しいか、または大きくなります）。
このように、背景画像の一部は、背景配置エリアに表示されない場合があります。
次の例は、contain と cover の使用方法を示しています：
#div1
{
background: url(img_flower.jpg);
background-size: contain;
background-repeat: no-repeat;
}
#div2
{
background: url(img_flower.jpg);
background-size: cover;
background-repeat: no-repeat;
}
Try it Yourself ❯
複数の背景を取扱うとき、background-size プロパティは、背景サイズに複数の値を（カンマ区切りのリストを使用して）受け取ります
次の例には、各画像ごとに異なる background-size の値を持った、3つの背景画像があります：
#example1 {
background: url(img_flwr.gif) left top
no-repeat, url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top
repeat;
background-size: 50px, 130px, auto;
}
Try it Yourself ❯
今、いつもブラウザウィンドウ全体を覆う web サイトに背景画像を設定しようと思います。
要件は次の通り：
次の例は、これを行う方法を示しています；html 要素を使用します（html 要素は、常に少なくともブラウザウィンドウの高さです）。 次に、その上に背景を固定し、中央に設定します。そして、background-size プロパティでサイズを調整します：
html {
background: url(img_flower.jpg) no-repeat
center fixed;
background-size: cover;
}
Try it Yourself ❯
CSS3 background-origin プロパティは、背景画像をどこに配置するかを指定します。
プロパティは、3つの異なる値を取ります：
次の例は、background-origin プロパティを示しています：
#example1
{
border: 10px solid black;
padding: 35px;
background: url(img_flwr.gif);
background-repeat: no-repeat;
background-origin: content-box;
}
Try it Yourself ❯
CSS3 background-clip プロパティは、背景の描画エリアを指定します。
プロパティは、3つの異なる値を取ります：
次の例は、background-clip プロパティを示しています：
#example1
{
border: 10px dotted black;
padding: 35px;
background: yellow;
background-clip: content-box;
}
Try it Yourself ❯
Exercise 1 ❯ Exercise 2 ❯ Exercise 3 ❯ Exercise 4 ❯ Exercise 5 ❯
| プロパティ | 説明 |
|---|---|
| background | すべての背景プロパティを1回の 宣言で設定するためのショートハンドプロパティ |
| background-clip | 背景のペイントエリアを指定する |
| background-image | 要素に1つ以上の背景画像を指定する |
| background-origin | 背景画像をどこに配置するかを指定する |
| background-size | 背景画像のサイズを指定する |