background-sizeプロパティについてまとめ

tochio

10年 ago

2007年のiPhone発売以来、スマートフォンにおける画像の表示サイズは、最大幅320pxとされてきましたが、 2010年に発売されたiPhone4のRetinaディスプレイ対応によって、それまで320pxの画像を実寸で表示していたものから「640pxの画像を320px幅で表示する」という方法が主流になり、さらにその後のAndroidのディスプレイの高精細化によって、「ディスプレイのサイズに合わせて画像を幅100％でFixさせる」と、変遷してきました。それに伴い、背景画像も「ディスプレイのサイズに合わせて幅100％でFixさせる」という表示方法が多く使われるようになり、 background-sizeプロパティをよく使うようになったので、覚書としてまとめました。

サンプルでは、300px×200pxの表示領域に、100px×100pxの画像を背景として表示しています。

■background-size :auto; 縦横比：画像サイズが自動で検出されるため、基本そのままのサイズ

・ソース

.auto {
   background: url(img/img_tamkun.gif) left top no-repeat;
 background-size: auto;
}

・表示

■background-size: cover; 縦横比：そのまま表示領域一杯に背景画像が表示され、表示領域をはみ出した部分は非表示

・ソース

.cover {
   background: url(img/img_tamkun.gif) left top no-repeat;
 background-size: cover;
}

・表示

■background-size: contain; 縦横比：そのまま表示領域に対して、背景画像全体が表示される

・ソース

.contain01 {
 background: url(img/img_tamkun.gif) left top no-repeat;
 background-size: contain;
}

・表示

200px×300pxの表示領域にcontainで表示すると以下のようになります。・表示

■background-size: px; 縦横：指定したサイズ（px）で表示される

・ソース

.px01 {
   background: url(img/img_tamkun.gif) left top no-repeat;
 background-size: 50px 50px;
}

・表示

上記サイズ指定でrepeatすれば以下のようになります。

・ソース

.px02 {
 background: url(img/img_tamkun.gif) left top repeat;
    background-size: 50px 50px;
}

・表示

■background-size: %; 縦横：表示領域に対して、指定した割合で表示される

・ソース

.per {
 background: url(img/img_tamkun.gif) left top no-repeat;
 background-size: 50% 50%;
}

・表示

サンプルでは、表示領域が300px×200px、背景画像は100px×100pxなので、背景画像は表示領域の50％である150px×100pxで表示されます。背景画像が50％の比率（50px×50px）で表示されるわけではないのでご注意を。

いろいろ便利に使えるbackground-sizeプロパティですが、落とし穴があるとすれば、「background-sizeプロパティをbackgroundプロパティより前に書くと、 background-sizeプロパティで記述した縦横の比率・pxが無効になってしまう」ことでしょうか。

この書き方だとbackground-sizeプロパティの指定が反映される。

.background-size {
    background: url(img/img_tamkun.gif) left top no-repeat;
 background-size: 50px 50px;
}

この書き方だとbackground-sizeプロパティの指定が反映されない。

.background-size {
 background-size: 50px 50px;
 background: url(img/img_tamkun.gif) left top no-repeat;
}

これは、iOS7のレンダリングエンジンから、backgroundのショートハンドが CSS3に対応したためです。（WebKit系のレンダリングエンジンは、その少し前に対応済みです）ショートハンドのbackgroundプロパティの中で省略されたbackground-sizeの指定は、自動的に初期値の「auto,auto」となるため、先に記述したbackground-sizeの「50px 50px」が「auto auto」で上書きされてしまう、ということになります。

background-sizeをショートハンドで一括で記述することもできますが、古い機種など未対応のものもあるようですので、避けたほうがよさそうです。 background-sizeプロパティを使う際は、・background ・background-size の順で記述しておけば安全でしょう。

また、PCでbackground-sizeプロパティを使用する場合、IE9以下がターゲットブラウザに入っているようなら、別途JSを入れて対応することになります。（IE8はbackground-sizeプロパティに対応していません）

【参考サイト】