(cache) cssで背景画像のサイズを変えよう！background-sizeまとめ

背景画像のサイズを縮小したり、拡大したり、サイズを変更したい時ってありますよね。そういう時は、cssのbackground-sizeプロパティを使うと簡単にできます。

background-sizeを使うと画面いっぱいに背景画像を表示したりすることもできちゃいます。そんな便利なbackground-sizeの使い方やテクニックを詳しく紹介していきますねー(^^)/

※このページは「【css】背景（backgroundプロパティ）の使い方まとめ」の続きです。backgroundプロパティ全般について詳しくはそちらをご覧下さい。

目次

background-sizeを古いブラウザに対応させるには

background-sizeプロパティの使い方

background-sizeプロパティでは、背景画像のサイズを指定することができます。

サイズを指定する方法は、数値にpxなどの単位やパーセンテージ（%）を付けて指定する方法、キーワードで指定する方法があります。では、それぞれの方法を紹介していきますね。

background-size: 幅高さ;

背景画像のサイズを単位付きの値で指定

pxなどの単位付きの値やパーセンテージ（%）で画像サイズを指定する場合、background-size:10px 15px;のように値を2つ記述すると、それぞれ記述した順に「幅」と「高さ」が設定されます。この場合でいうと、背景画像の幅が10px、高さが15pxということ。

値を1つだけ、記述した場合は、高さが「auto」に設定されます。ちなみに「-10px」のように負の値を記述する事はできませんので注意。

それと、指定したサイズが実際の背景画像のサイズと違う場合は、指定したサイズに合わせて背景画像が「拡大」「縮小」されます。

使える値	意味
pxなどの単位つきの値	背景画像の幅と高さをpxなどの単位付きの値で指定できる。1つしか値を設定しなかった場合は、「高さ」が「auto」となる
パーセンテージ（%）	表示領域に対するパーセンテージ（%）で背景画像の幅と高さを指定する。1つしか値を指定しなかった場合は、「高さ」が「auto」となる

.example{
  background-image:url(image/img.jpg);
  background-repeat:no-repeat;
  background-size:100px 200px;
}

.example{
  background-image:url(image/img.jpg);
  background-repeat:no-repeat;
  background-size:25% 50%;
}

背景画像のサイズをキーワードで指定

画面のサイズに合わせた背景画像の表示サイズをキーワード使って指定できます。一つ注意点なのですが、coverやcontainといったキーワードで背景画像のサイズを指定する場合は、必ずhtml要素とbody要素の高さを「100%」にしておきましょう。

html,body{ height:100%;}

キーワード	意味
auto	画像の元のサイズで表示される。（初期値）幅、高さの片方だけにautoを設定すると画像の元のサイズの縦横比を保ったまま、もう片方に合わせたサイズが設定される
cover	縦横比を保持して、背景画像1枚分で表示領域を完全に覆うサイズに拡大・縮小される
contain	縦横比を保持して、常に背景画像が全体に表示されるサイズに拡大・縮小される

cover

background-sizeにcoverを設定すると背景画像が画面いっぱいに、常に表示されるようになります。

coverの場合は常に画面いっぱいに表示されるので、画面のサイズによっては背景画像の一部がはみ出すというか、途切れたように見える場合があります。それとブラウザのサイズ（ウィンドウのサイズ）を変えても、常に画面いっぱいに表示されます。

html,body{ height:100%;}

.example{
  background-image:url(image/img.jpg);
  background-position:center;
  background-size:cover;
}

<!--省略-->
</head>
<body>
</body>
</html>

contain

containは画面のサイズに関係なく、常に背景画像の全体が表示されるようになります。

縦横比を保ったまま、背景画像の全体が表示されるので、画面の横や縦に空白の部分が生まれる事があります。ちなみに背景画像が画面に収まる最大のサイズで常に表示されます。

html,body{ height:100%;}
.example{
  background-image:url(image/img.jpg);
  background-position:center;
  background-size:no-repeat;
  background-size:contain;
}

<!--省略-->
</head>
<body>
</body>
</html>

background-sizeを古いブラウザに対応させるには

背景画像を拡大・縮小させるbackground-sizeプロパティは、css3から加わった機能です。なので古いバージョンのブラウザでは、対応してない場合があります。

そこで、古いブラウザにもbackground-sizeプロパティを対応させるための記述をする必要があります。

書き方は簡単で、下をコピペして「cover」の部分を自分の使いたいキーワードや値に変えるだけ！めっちゃ簡単です。

.example{
  background-image:url(image/img.jpg);
  -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
  background-size:cover;
}

これで下のブラウザに対応できます。