background-size

background-sizeは、背景画像のサイズを指定するスタイルです。

解説

背景画像のサイズを指定します。
同時に背景画像の指定（background-image）の指定が必要です。

構文は以下になります。

background-size:値1 background-size:値1 値2

background-sizeには以下の値が指定できます。

値	説明
auto	サイズを自動で指定する（初期値）（例）background-size:auto;
cover	縦横比はそのままで、領域に収まる最大サイズにする（例）background-size:cover; ※画像は切れずにすべて表示されるが、領域に空きが出る
contain	縦横比はそのままで、領域を埋める最小サイズにする（例）background-size:contain; ※画像は切れて表示されるが、領域はすべて埋まる
サイズ	px等の単位と共に縦横サイズを数値で指定する（例）横200px、縦100pxにする→ background-size:200px 100px;
割合	領域に対して割合でサイズを指定する（例）横50%、縦は自動にする→ background-size:50% auto;

以下の画像（100px x 100px）を使用します。
⇒ 画像100x100


.sample01{
  width:300px;
  height:200px;
  background-image:url('sample.jpg');
  background-size:auto;
}


<div class="sample01"></div>


.sample02{
  width:300px;
  height:200px;
  background-image:url('sample.jpg');
  background-size:cover;
}


<div class="sample02"></div>


.sample03{
  width:300px;
  height:200px;
  background-image:url('sample.jpg');
  background-size:contain;
}


<div class="sample03"></div>


.sample04{
  width:300px;
  height:200px;
  background-image:url('sample.jpg');
  background-size:100px 50px;
}


<div class="sample04"></div>


.sample05{
  width:300px;
  height:200px;
  background-image:url('sample.jpg');
  background-size:50% auto;
}


<div class="sample05"></div>