background-size プロパティは、背景画像のサイズを指定するプロパティです。
下記のサンプルの背景画像には次の画像が使用されています。
次の例は、background-size 値に contain を指定しています。
値に contain が指定された場合、画像の縦横比は保持したまま背景領域に収まる最大サイズになるように背景画像を拡大縮小します。
.background-size-contain {
padding: 20px;
background-image: url("images/grid.gif");
background-size: contain;
-moz-background-size: contain; /* Firefox用 */
-webkit-background-size: contain; /* Safari,Google Chrome用 */
-o-background-size: contain; /* Opera用 */
}
値に contain が指定された場合の表示サンプルです。
値に contain が指定された場合、画像の縦横比は保持したまま背景領域に収まる最大サイズになるように背景画像を拡大縮小します。
次の例は、background-size 値に cover を指定しています。
値に cover が指定された場合、画像の縦横比は保持したまま背景領域を完全に覆う最小サイズになるように背景画像を拡大縮小します。
.background-size-contain {
padding: 20px;
background-image: url("images/grid.gif");
background-size: cover;
-moz-background-size: cover; /* Firefox用 */
-webkit-background-size: cover; /* Safari,Google Chrome用 */
-o-background-size: cover; /* Opera用 */
}
指定値に cover が指定された場合の表示サンプルです。
値に cover が指定された場合、画像の縦横比は保持したまま背景領域を完全に覆う最小サイズになるように背景画像を拡大縮小します。
次の例は、background-size に背景画像の幅・高さを数値で指定しています。
値に指定する背景画像の大きさは、横幅と高さを半角スペースで区切って指定します。1 つ目の値が横幅、2 つ目の値が高さです。背景画像の大きさを 20×20 ピクセルと指定しています。
.background-size-contain {
padding: 20px;
background-image: url("images/grid.gif");
background-size: 20px 20px;
-moz-background-size: 20px 20px; /* Firefox用 */
-webkit-background-size: 20px 20px; /* Safari,Google Chrome用 */
-o-background-size: 20px 20px; /* Opera用 */
}
background-size に背景画像の幅・高さを数値で指定した場合の表示サンプルです。
値に指定する背景画像の大きさは、横幅と高さを半角スペースで区切って指定します。1 つ目の値が横幅、2 つ目の値が高さです。背景画像の大きさを 20×20 ピクセルと指定しています。
次の例は、background-size にパーセンテージで指定しています。
値には、背景領域に対する背景画像の幅・高さのパーセンテージを指定します。
.background-size-contain {
padding: 20px;
background-image: url("images/grid.gif");
background-size: 50% 50%;
-moz-background-size: 50% 50%; /* Firefox用 */
-webkit-background-size: 50% 50%; /* Safari,Google Chrome用 */
-o-background-size: 50% 50%; /* Opera用 */
}
background-size にパーセンテージで指定した場合の表示サンプルです。
背景領域に対する背景画像の幅・高さのパーセンテージを指定します。
次の例は、background-size 値に auto を指定しています。
画像の縦横比を維持して表示するには、横幅または高さのどちらかの大きさを数値あるいはパーセンテージで指定し、もう一方を「 auto 」と指定します。この値がデフォルト値です。
.background-size-contain {
padding: 20px;
background-image: url("images/grid.gif");
background-size: 20% auto;
-moz-background-size: 20% auto; /* Firefox用 */
-webkit-background-size: 20% auto; /* Safari,Google Chrome用 */
-o-background-size: 20% auto; /* Opera用 */
}
background-size 値に auto を指定した場合の表示サンプルです。
画像の縦横比を維持して表示するには、横幅または高さのどちらかの大きさを数値あるいはパーセンテージで指定し、もう一方を「 auto 」と指定します。