Site icon Tips Note by TAM

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

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プロパティに対応していません)

【参考サイト】