2013.01.28 CSS3 の background-size を使ってみました

アイズのブログを始めました

初めまして。今月よりアイズテクノロジーのWebエンジニアとして勤務している Yuki と申します。

このブログは主に、Webデザインや技術について学んだことを記事にまとめ、知識の蓄積と共有を図っていくために制作されました。社内での情報共有はもちろんのこと、皆様にもお役に立てることがあれば幸いに思います。これからどうぞよろしくお願いいたします。

さて、このたび当社のWebサイトを大幅にリニューアルすることとなり、CSSを書き直しているなかで、初めて使うCSS3プロパティが幾つかありました。そのうちのひとつ background-size について書きたいと思います。

画面解像度に応じて背景の大きさを変えたい

Webページの背景に大きなイラストや写真を使うとき、考慮すべきなのが画面の解像度です。一昔前には 1024×768 ピクセルが一般的だったパソコンのモニタも、今では MacBook Pro Retina の 2880×1800 など高解像度化が進んでおり、様々な閲覧環境に合わせる必要が生じています。そんなとき便利なのが background-size です。

当社のサイトでは背景に2880×2160の画像を指定しています。これは高解像度のRetinaでも綺麗に表示することや、画面のアスペクト比が横長の 16:9 から、正方形に近い 5:4 まで対応できることを考慮しています。

cover と contain の違い

どちらを指定しても画像のアスペクト比は保持されますが、画面全体を覆いたいという用途からすれば background-size: cover を指定することが多いのではないでしょうか。画像で説明すると cover と contain の違いは以下のようになります。

background-size

IE8以下に対応するならjQuery

とても便利な background-size ですが、残念ながら Internet Explorer 8 以下には対応していません。当社のサイトでは画像のサイズはそのままで位置のみ指定しています。

もしも IE8 以下に適用したいときは jQuery を使うと便利です。この場合は背景画像の指定ではなく、img要素に z-index を指定させて、重なり順を下に配置するかたちとなります。画面いっぱいに写真を見せたい場合などには jQuery のほうが良さそうですね。