>背景画像のサイズを指定します：
div
{
background: url(img_flwr.gif);
background-size: 80px 60px;
background-repeat: no-repeat;
}
Try it Yourself ❯
他の "Try it Yourself" 例が下にあります。
background-size プロパティは、背景画像のサイズを指定します。
| デフォルト値： | auto |
|---|---|
| 継承： | 継承する |
| アニメーション可否： | 可。animatable を参照 Try it |
| バージョン： | CSS3 |
| JavaScript 構文： | object.style.backgroundSize="60px 120px" Try it |
表中の数字は、完全にプロパティをサポートした最初のブラウザのバージョンです。
-webkit-、-moz-、-o- の後に続く数字は、接頭辞付きで動作した最初のバージョンです。
| プロパティ | |||||
|---|---|---|---|---|---|
| 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-size: auto|length|cover|contain|initial|inherit;
| 値 | 説明 | Play it |
|---|---|---|
| auto | デフォルト値。background-image の幅と高さが設定されます | Play it ❯ |
| length | 背景画像の高さと幅を設定します。 最初の値は幅で、2 番目の値は高さを設定します。 1 つの値だけを指定した場合、2 番目の値は "auto" に設定されます | Play it ❯ |
| percentage | 画像の高さと幅を親要素の割合で設定します。最初の値は幅で、2 番目の値は高さの設定です。 1 つの値だけを指定した場合、2 番目の値は "auto" に設定されます | Play it ❯ |
| cover | 背景エリアが、背景画像により完全に覆われるよう、できるだけ大きく背景画像を調整します。 背景画像の一部は、背景配置エリア内のビューにない場合があります | Play it ❯ |
| contain | 幅と高さの両方が、コンテンツエリア内に収まることができるような最大のサイズに画像を調整します | Play it ❯ |
| initial | プロパティにデフォルト値を設定します。initial を参照 | Play it ❯ |
| inherit | このプロパティは親要素を継承します。inherit を参照 |
コンテンツエリアを完全に覆うように背景画像を引き伸ばします：
div
{
background: url(img_flwr.gif);
background-size: 100% 100%;
background-repeat: no-repeat;
}
Try it Yourself ❯
4つのコピーが丁度横に収まるように、背景画像を引き伸ばします：
div {
background: url(w3css.gif);
background-size: 25%;
}
Try it Yourself ❯
CSS3 チュートリアル：CSS3 Backgrounds
HTML DOM リファレンス：backgroundSize プロパティ