background-size - 背景のサイズ
background-sizeは、背景のタイルあたりのサイズを指定するプロパティです。
概要
- 名前
- background-size
- 値
- <bg-size>#
<bg-size> = [ <length-percentage> | auto ]{1,2} | cover | contain <length-percentage> = [ <length> | <percentage> ]
- 初期値
- auto
- 適用対象
- 全ての要素。
- 継承
- しない。
- パーセンテージ
- background-originの領域に相対的。
- メディア
- visual
- 計算値
- as specified, but with lengths made absolute and omitted auto keywords filled in
- アニメーションの可否
- as repeatable list of simple list of length, percentage, or calc and keywords
- 仕様書
- https://drafts.csswg.org/css-backgrounds-3/#the-background-size
チュートリアル
<length>、または<percentage>でサイズを指定できます。1つ目の値は横幅、2つ目の値は高さに適用されます。1つの値しか指定しない場合、2つ目の値はautoを指定したのと同じ扱いになります。autoは1つ目の値に指定した場合は「画像本来の横幅」を意味します。2つ目の値に指定した場合は「横幅に応じてアスペクト比を維持した高さ」を意味します。
div {
background-size: auto ; /* 横幅: auto、高さ: auto */
}
div {
background-size: 10px ; /* 横幅: 10px、高さ: auto */
}
div {
background-size: 10px 20% ; /* 横幅: 10px、高さ: 20% */
}
パーセンテージの基準は、background-originが示す領域の横幅と高さです。
div {
background-origin: border-box ; /* 枠線の領域 */
}
div {
background-origin: padding-box ; /* 枠内余白の領域 */
}
div {
background-origin: content-box ; /* コンテンツの領域 */
}
下記のキーワードを指定できます。これらのキーワードは1つの値でしか指定できません。
- cover
- 領域の横幅、高さのうち、より大きい方に合わせてタイルのサイズが調整される。
- contain
- 全てのタイルの全体が最大限、収まるように、1つ1つのタイルのサイズが調整される。
デモ
指定方法による違い
それぞれ背景画像のタイルのサイズが違うのを確認して下さい。
<!-- このコードは編集できます。 -->
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-image: url(./image.png) ;
border: 1px dotted #000 ;
margin: 0 0 24px ;
height: 175px ;
}
#auto {
background-size: auto ;
}
#percentage {
background-size: 50% 100% ;
}
#cover {
background-size: cover ;
}
#contain {
background-size: contain ;
}
</style>
</head>
<body>
<p>auto</p>
<div id="auto"></div>
<hr>
<p>50% 100%</p>
<div id="percentage"></div>
<hr>
<p>cover</p>
<div id="cover"></div>
<hr>
<p>contain</p>
<div id="contain"></div>
</body>
</html>
パーセンテージの基準
パーセンテージの基準となる長さを確認します。下記はいずれもbackground-sizeに100% 100%を指定しています。background-originの値によって、同じパーセンテージでもサイズが変わるのを確認して下さい。
<!-- このコードは編集できます。 -->
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-image: url(./image.png) ;
background-size: 100% 100% ;
border: 25px dotted #000 ;
padding: 25px ;
margin: 0 0 24px ;
height: 140px ;
}
#border-box {
background-origin: border-box ;
}
#padding-box {
background-origin: padding-box ;
}
#content-box {
background-origin: content-box ;
}
</style>
</head>
<body>
<p>border-box</p>
<div id="border-box"></div>
<hr>
<p>padding-box</p>
<div id="padding-box"></div>
<hr>
<p>content-box</p>
<div id="content-box"></div>
</body>
</html>
アニメーション
<!-- このコードは編集できます。 -->
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-image: url(./image.png) ;
animation: 5s infinite alternate syncer ;
width: 200px ;
height: 200px ;
}
@keyframes syncer {
from {
background-size: 50% ;
}
to {
background-size: 100% ;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
サポート状況
Chrome | Firefox | Safari | Edge | IE | Opera | iOS Safari | Android |
---|---|---|---|---|---|---|---|
● | ● | ● | ● | ● | ● | ● | ● |
関連記事
- background-position
- background-positionは、背景の位置を指定するプロパティです。水平方向と垂直方向、それぞれのオフセットを指定できます。
- background-origin
- background-originは、背景の描画が開始される原点を指定するプロパティです。
- background
- backgroundは、背景に関する各プロパティをまとめて指定できる、ショートハンド・プロパティです。
- background-repeat
- background-repeatは、背景の繰り返し表示を調整するプロパティです。