SYNCERのロゴ
アイキャッチ画像

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>

サポート状況

ChromeFirefoxSafariEdgeIEOperaiOS SafariAndroid
  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年11月4日 (土)
コンテンツを公開しました。