background-size プロパティ

background-size プロパティは、背景画像のサイズを設定します。プロパティの値は、任意のサイズ単位、またはキーワード auto、cover、contain です。

構文

セレクター {
	background-size: 値;
}

キーワード

値	説明
`auto`	背景は、背景画像の実際のサイズである自然なサイズになります。一方のサイドにのみ `auto` が指定された場合、そのサイドでは比率を歪ませずにスケーリングされます。
`cover`	比率を維持したまま、画像が要素全体を覆うようにスケーリングします。画像全体が収まるように努力されますが、常に可能とは限らないため、画像の一部が切り取られることがあります。要素は常に画像で完全に覆われます。
`contain`	比率を維持したまま、画像が要素内に完全に収まるようにスケーリングします。画像のアスペクト比と要素のサイズに応じて、幅全体または高さ全体を使用します。通常、要素は画像で完全には覆われません（その代わり、画像は縮小されても常に全体が見えます）。

デフォルト値: auto。

使用方法

サイズ単位と auto は、さまざまな組み合わせで使用できます。例： auto 20px、 30% 20px、 auto 30% など。この場合、最初のパラメータは背景の幅のサイズを、2番目のパラメータは背景の高さのサイズを指定します。パラメータが1つ指定された場合、それは背景の幅と高さの両方のサイズを同時に設定します。

例

現在、背景画像は自然なサイズを持ちます：

<div id="elem"></div>

#elem {
	background-repeat: no-repeat;
	background-image: url("bg.png");
	border: 1px solid black;
	width: 550px;
	height: 400px;
}

例

現在、背景画像のサイズは 300px × 400px です（この場合、画像の比率が歪みます）：

<div id="elem"></div>

#elem {
	background-size: 300px 400px;
	background-repeat: no-repeat;
	background-image: url("bg.png");
	border: 1px solid black;
	width: 400px;
	height: 400px;
}

例

現在、背景画像のサイズは 400px × 400px です（この場合、画像の比率が歪みます）：

<div id="elem"></div>

#elem {
	background-size: 400px;
	background-repeat: no-repeat;
	background-image: url("bg.png");
	border: 1px solid black;
	width: 400px;
	height: 400px;
}

例

現在、背景画像は水平方向に 400px のサイズで、垂直方向のサイズは比率が歪まないように調整されます：

<div id="elem"></div>

#elem {
	background-size: 400px auto;
	background-repeat: no-repeat;
	background-image: url("bg.png");
	border: 1px solid black;
	width: 400px;
	height: 400px;
}

例

現在、背景画像は垂直方向に 400px のサイズで、水平方向のサイズは比率が歪まないように調整されます：

<div id="elem"></div>

#elem {
	background-size: auto 400px;
	background-repeat: no-repeat;
	background-image: url("bg.png");
	border: 1px solid black;
	width: 400px;
	height: 400px;
}

例 . contain の値

値 contain の動作を確認してください：

<div id="elem1" class="elem"></div>
<div id="elem2" class="elem"></div>
<div id="elem3" class="elem"></div>
<div id="elem4" class="elem"></div>
<div id="elem5" class="elem"></div>
<div id="elem6" class="elem"></div>

.elem {
	background-size: contain;
	background-repeat: no-repeat;
	background-image: url("bg.png");
	border: 1px solid black;
	margin-bottom: 20px;
}

#elem1 {
	width: 600px;
	height: 500px;
}

#elem2 {
	width: 500px;
	height: 600px;
}

#elem3 {
	width: 400px;
	height: 400px;
}

#elem4 {
	width: 300px;
	height: 400px;
}

#elem5 {
	width: 200px;
	height: 400px;
}

#elem6 {
	width: 300px;
	height: 100px;
}

例 . cover の値

値 cover の動作を確認してください：

<div id="elem1" class="elem"></div>
<div id="elem2" class="elem"></div>
<div id="elem3" class="elem"></div>
<div id="elem4" class="elem"></div>
<div id="elem5" class="elem"></div>
<div id="elem6" class="elem"></div>

.elem {
	background-size: cover;
	background-repeat: no-repeat;
	background-image: url("bg.png");
	border: 1px solid black;
	margin-bottom: 20px;
}

#elem1 {
	width: 600px;
	height: 500px;
}

#elem2 {
	width: 500px;
	height: 600px;
}

#elem3 {
	width: 400px;
	height: 400px;
}

#elem4 {
	width: 300px;
	height: 400px;
}

#elem5 {
	width: 200px;
	height: 400px;
}

#elem6 {
	width: 300px;
	height: 100px;
}

例 . cover の動作の改善

値 cover の動作は、background-position プロパティを使用して画像を中央揃えすることで改善できます（この場合、馬のお尻ではなく頭が見える部分になります）：

<div id="elem1" class="elem"></div>
<div id="elem2" class="elem"></div>
<div id="elem3" class="elem"></div>
<div id="elem4" class="elem"></div>
<div id="elem5" class="elem"></div>
<div id="elem6" class="elem"></div>

.elem {
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	background-image: url("bg.png");
	border: 1px solid black;
	margin-bottom: 20px;
}

#elem1 {
	width: 600px;
	height: 500px;
}

#elem2 {
	width: 500px;
	height: 600px;
}

#elem3 {
	width: 400px;
	height: 400px;
}

#elem4 {
	width: 300px;
	height: 400px;
}

#elem5 {
	width: 200px;
	height: 400px;
}

#elem6 {
	width: 300px;
	height: 100px;
}

background-size プロパティ

構文

キーワード

使用方法

例

例

例

例

例

例 . contain の値

例 . cover の値

例 . cover の動作の改善

関連項目