CSS【 background 】5～background-size

背景に関するプロパティの中に、背景画像のサイズを変更する際に使用するbackground-sizeプロパティがあります。
今回は、background-sizeプロパティについてまとめたいと思います。

背景に関するプロパティについては、以下のページもご参照下さい。
CSS【 background 】1～背景プロパティの種類とbackground-color
CSS【 background 】2～background-imageでレイヤーやグラデーションも
CSS【 background 】3～background-repeat、background-attachment
CSS【 background 】4～background-position
CSS【 background 】5～background-size（本ページ）
CSS【 background 】6～background-clip、background-origin
CSS【 background 】7～背景に関するショートハンドプロパティ

1. background-sizeプロパティ

background-sizeプロパティは、背景画像のサイズを変更する際に使用します。

background-sizeプロパティで指定する値には、次のようなものがあります。

　
background-sizeプロパティの値は、継承されません。
また、background-sizeプロパティは、全ての要素で使用できます。

containとcoverは、CSS3から追加されたキーワードです。これら使うと、画像が背景領域にちょうど収まるように指定することができます。

▲目次へ戻る

2. background-sizeプロパティの値の数

background-sizeプロパティは、1～2個の値を半角スペースで区切って指定します。

▲目次へ戻る

3. キーワードで指定

background-sizeプロパティに、auto、contain、coverをそれぞれ指定してみます。

　
ソースは次の通りです。

（CSS）
div#sample {margin:0; padding:0;}
div#sample p {
	width:350px;
	height:250px;
	font-weight:bold;
	background-color:#F9C;
	background-image:url(img/living.jpg);
	background-repeat:no-repeat;}
div#sample p:nth-child(1) {background-size:auto;}
div#sample p:nth-child(2) {background-size:contain;}
div#sample p:nth-child(3) {background-size:cover;}

（HTML）
<div id="sample">
<p>auto（デフォルト）</p>
<p>contain</p>
<p>coverlt;/p>
</div>

autoは原寸サイズです。background-sizeプロパティを指定しない場合は、デフォルト値のautoとなり、原寸サイズで表示されます。

coverは、レスポンシブレイアウトを考慮する際に最適な値です。

▲目次へ戻る

3. %で指定

%で値を指定する場合は、背景領域の幅や高さに対するパーセンテージで画像の幅や高さを指定します。

%の値は、幅、高さの順で、値を半角スペースで区切って指定します。
2つ目の値（高さ）を指定せず、値を１つだけ指定すると、高さはautoとなります。

　
ソースは次の通りです。

（CSS）
div#sample {margin:0; padding:0;}
div#sample p {
	width:350px;
	height:250px;
	font-weight:bold;
	background-color:#F9C;
	background-image:url(img/living.jpg);
	background-repeat:no-repeat;}
div#sample p:nth-child(1) {background-size:100%;}
div#sample p:nth-child(2) {background-size:auto 100%;}
div#sample p:nth-child(3) {background-size:70% 100%;}

（HTML）
<div id="sample">
<p>100%</p>
<p>auto 100%;</p>
<p>70% 100%;/p>
</div>

%で指定する場合は、背景領域や画像の縦横比によって画像の見え方が違ってきます。

▲目次へ戻る