CSS3 背景
CSS3 背景
CSS3 には、背景要素をより細かく制御できる新しい背景プロパティがいくつか含まれています。
この章では、以下の背景プロパティについて学習します。
- background-image
- background-size
- background-origin
- background-clip
また、複数の背景画像の使用方法についても学習します。
ブラウザサポート
表内の数字は、そのプロパティをサポートする最初のブラウザバージョンを示します。
-webkit-、-ms- または -moz- の直後の数字は、そのプレフィックス付きプロパティをサポートする最初のブラウザバージョンを示します。
| プロパティ | |||||
|---|---|---|---|---|---|
| background-image (with multiple backgrounds) |
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 プロパティ
CSS3 では、background-image プロパティを使用して背景画像を追加できます。
異なる背景画像はカンマで区切ります。すべての画像のうち最前面に表示されるのが最初の画像です。
例
#example1 {
background-image: url(img_flwr.gif), url(paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
}
試してみる »
異なる画像に複数の異なるプロパティを設定できます
例
#example1 {
background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
}
試してみる »
CSS3 background-size プロパティ
background-size は背景画像のサイズを指定します。CSS3 より前は、背景画像のサイズは画像の実際のサイズによって決まっていました。
CSS3 では背景画像を指定でき、さまざまな環境で背景画像のサイズを再指定できます。ピクセルまたはパーセントサイズを指定できます。
指定するサイズは、親要素の幅と高さに対するパーセンテージです。
例 1
背景画像をリセット：
div
{
background:url(img_flwr.gif);
background-size:80px 60px;
background-repeat:no-repeat;
}
試してみる »
例 2
背景画像を伸縮してコンテンツ領域を完全に埋めます：
div
{
background:url(img_flwr.gif);
background-size:100% 100%;
background-repeat:no-repeat;
}
試してみる »
CSS3 の background-origin プロパティ
background-origin プロパティは、背景画像の配置領域を指定します。
content-box、padding-box、border-box の領域内に背景画像を配置できます。
例
content-box 内に背景画像を配置：
div
{
background:url(img_flwr.gif);
background-repeat:no-repeat;
background-size:100% 100%;
background-origin:content-box;
}
試してみる »
CSS3 の複数の背景画像 |
|
|
CSS3 では、要素に複数の背景画像を追加できます。 |
CSS3 background-clip プロパティ
CSS3 の background-clip（背景クリップ）プロパティは、指定した位置から描画を開始します。
例
#example1 {
border: 10px dotted black;
padding: 35px;
background: yellow;
background-clip: content-box;
}
試してみる »
新しい背景プロパティ
| 順序 | 説明 | CSS |
|---|---|---|
| background-clip | 背景の描画領域を指定します。 | 3 |
| background-origin | 背景画像の配置領域を指定します。 | 3 |
| background-size | 背景画像のサイズを指定します。 | 3 |