CSS【 background 】５ ～ background-size

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

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

目次

１．background-sizeプロパティ
２．background-sizeプロパティの値の数
３．キーワードで指定
４．%で指定

１．background-sizeプロパティ

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

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

auto	デフォルト値 画像の縦横比を維持したまま、サイズを自動計算する
contain	画像の縦横比を維持したまま、背景領域に収まる最大サイズに自動調整する 画像全体を表示するため、画像がno-repeatの場合は、画像で覆われない領域は背景色を表示する
cover	画像の縦横比を維持したまま、背景領域に収まる最小サイズに自動調整する 領域の幅か高さの小さいほうに画像の幅か高さを合わせて全体を覆うため、画像がトリミングされる
%	画像に対してのパーセンテージで指定
数値	pxやemなどの単位を付けて、画像のサイズを指定

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

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

▲目次へ戻る

２．background-sizeプロパティの値の数

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

●containとcover以外の値で、値を２つ指定した場合は、画像の幅、高さの順の指定となります。

●containとcover以外の値で、値を１つ指定した場合は、２つ目の値（高さ）はautoとなります。

●containとcoverは、値は１つだけ（containならcontainだけ）指定します。
「background-size: contain 100%」のような指定をすると、ブラウザが指定の内容を認識できないため、デフォルト値のbackground-size: autoとなります。

▲目次へ戻る

３．キーワードで指定

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は、レスポンシブレイアウトを考慮する際に最適な値です。

▲目次へ戻る

４．%で指定

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

%の値は、幅、高さの順で、値を半角スペースで区切って指定します。
２つ目の値（高さ）を指定せず、値を１つだけ指定すると、高さは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>

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

▲目次へ戻る