このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

background-size:背景画像の大きさCSS3で追加

記事Feb. 15th,2020
背景画像の大きさを指定するプロパティ
この記事はCSS3に対応しています。
この記事はCSS3に対応しています。

プロパティについて

概要

初期値 background-size: auto;
適用対象 すべての要素
継承 しない
パーセント値 背景の描画領域のサイズに依存

background-size”プロパティは背景画像の大きさを指定するプロパティです。

サンプルコード

div { background-size: 50px auto;}

説明
キーワード値
contain 画像に固有の縦横比があればその比率を保持しながら、背景の描画領域に収まる最大の大きさ
cover 画像に固有の縦横比があればその比率を保持しながら、背景の描画領域をすべて覆うことができる最小の大きさ
auto 画像に固有の縦横比があればその比率を保持しながら画像を拡大もしくは縮小 (画像に固有の縦横比がない場合は画像の固有の寸法、固有の寸法もなければ“100%”として扱います。)
他のデータ型
<length> pxemなどで背景画像の大きさを指定
<percentage> 背景の描画領域の横幅、高さを“100%”として背景画像の大きさを指定

値の指定方法

contain”もしくは“cover”を使用する場合

値に““contain”、“cover”を指定する場合は値は1個だけ指定できます。

auto”、“<length>”値、“<percentage>”値を使用する場合

値に“auto”もしくは“<length>”値、“<percentage>”値を指定する場合は値を1個、もしくは2個指定することができます。

値が2個の場合は1個目の値が背景画像の横幅を指定し、2個目の値が背景画像の高さを指定します。2個目の値が省略され、値が1個だけである場合は背景画像の高さは“auto”として扱われます。

background-size: 〚背景画像の横幅〛 〚背景画像の高さ〛;
background-size: auto 〚背景画像の高さ〛;
background-size: 〚背景画像の横幅〛 auto;

値が“auto”だけである場合は背景画像はその固有の大きさで描画されます。

background-size: auto;
background-size: auto auto;

複数の背景画像を指定する

background-image”プロパティで複数の背景画像が指定されている場合、値のセットをコンマ(“,”)で区切って記述することでそれぞれの背景画像の大きさを指定することができます。値の順番はbackground-imageで指定した値の順番に対応します。

div {
background-image: url(sample/background_sample.png), url(background_sample2.png);
background-repeat: no-repeat, no-repeat;
background-size: 50px 50px, cover;
}

仕様書

Level 1 Level 2 Level 3
勧告(REC) 勧告(REC) 勧告候補(CR)
background-size
定義なし

定義なし

定義あり
Level 1 Level 2 Level 3
勧告(REC) 勧告(REC) 勧告候補(CR)
contain
定義なし

定義なし

定義あり
cover
定義なし

定義なし

定義あり
auto
定義なし

定義なし

定義あり
<length>
定義なし

定義なし

定義あり
<percentage>
定義なし

定義なし

定義あり

使用例

キーワード値で指定する

div {
background-repeat: no-repeat;
background-image: url(background_sample.png);
background-size: contain;
}
background-size: contain;
div {
background-repeat: no-repeat;
background-image: url(background_sample.png);
background-size: cover;
}
background-size: cover;
div {
background-repeat: no-repeat;
background-image: url(background_sample.png);
background-size: auto;
}
background-size: auto;

<length>”値で指定する

div {
background-repeat: no-repeat;
background-image: url(background_sample.png);
background-size: 100px;
}
background-size: 100px;
div {
background-repeat: no-repeat;
background-image: url(background_sample.png);
background-size: 50px 20px;
}
background-size: 100px 100px;

<percentage>”値で指定する

div {
background-repeat: no-repeat;
background-image: url(background_sample.png);
background-size: 50%;
}
background-size: 50%;
div {
background-repeat: no-repeat;
background-image: url(background_sample.png);
background-size: auto 50%;
}
background-size: auto 50%;
div {
background-repeat: no-repeat;
background-image: url(background_sample.png);
background-size: 50% 50%;
}
background-size: 50% 50%;

複数の背景画像を指定する

div {
background-repeat: no-repeat, no-repeat;
background-image: url(background_sample.png),url(background_sample2.png);
background-size: auto 50%,cover;
}
background-size: auto 50%,cover;
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク