CSS3 background-size Property

背景画像のサイズを指定します。

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

もっと"Try it Yourself"以下の例。

定義と使用法

背景-sizeプロパティは、背景画像のサイズを指定します。

デフォルト値：	auto
継承されました：	no
アニメーション：	yes. Read about 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-

値	説明	それを再生します
auto	デフォルト値。背景画像は、その幅と高さが含まれています	それを再生します»
length	背景画像の幅と高さを設定します。最初の値は第二の値が高さを設定し、幅を設定します。一つの値だけが与えられた場合、第二は次のように設定されている"auto"	それを再生します»
percentage	親要素の割合で背景画像の幅と高さを設定します。最初の値は第二の値が高さを設定し、幅を設定します。一つの値だけが与えられた場合、第二は次のように設定されている"auto"	それを再生します»
cover	背景領域は、完全に背景画像によって覆われるように、背景画像ができるだけ大きくなるように拡張。背景画像の一部が背景配置領域内のビューでないかもしれません	それを再生します»
contain	幅と高さの両方がコンテンツ領域内に収まることができるような最大サイズに画像を拡大縮小	それを再生します»
initial	このプロパティがデフォルト値に設定します。初期についての記事を読みます	それを再生します»
inherit	その親要素からこのプロパティを継承します。継承についての記事を読みます

完全コンテンツ領域を覆うように、背景画像を引き伸ばします。

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

正確に4つのコピーが水平方向に収まるように背景画像をストレッチ：

div {
background: url(w3css.gif);
background-size: 25%;
}