CSSプロパティ backgrouond-size で背景画像のサイズ調整をする方法

とあるページのコーディングをしていて演出部分でやりたいことを実現する方法がわからず調べてみたら、知らなかったCSSプロパティを見つけました。

ウェブ界隈一般では周知されてるかもしれませんが自分用のメモということで。

背景をボックスやウィンドウにフィットさせる

何をしたかったかというとページ全体に背景画像を設定したとき、その背景画像がウィンドウサイズの変化にあわせて上手いことフィットする方法を探してまして。

で、見つけたのがこちらのページ。

どうやらCSS3で追加になったプロパティのようです。

backgrouond-size:に続く値によって、背景画像のサイズを調整するプロパティです。とり得る値は以下の通り。

【cover】画像の縦横比を保持したままボックスのサイズにあわせて拡大縮小。ボックスめいっぱいに表示するので縦横比の違うボックスだとはみ出て表示されない部分が生じます。
【contain】画像の縦横比を保持したままボックスのサイズにあわせて拡大縮小…は【cover】と同じですが、画像全体を表示するため、縦横比の違うボックスに適用すると余白が生じます。
【n% m%】幅と高さのサイズをそれぞれ指定します。両方100%を指定すると元画像の縦横比は無視してボックス全体に1枚の画像が治まるようになります。
【100% auto】画像の縦横比を保持したまま幅方向の大きさのみボックスにフィットさせます。縦横比が異なるときは高さ方向に見切れる部分か余白が生じます。
【auto 100%】画像の縦横比を保持したまま高さ方向の大きさのみボックスにフィットさせます。縦横比が異なるときは幅方向に見切れる部分か余白が生じます。

background-positionプロパティとの組み合わせ方で、見切れ/余白の発生の仕方が変化します。ボックス中央基準ならbackground-position:50% 50%;を設定しておくと良いでしょう。

また、background-attachment:fixed;と組み合わせてページ全体の背景を設定すると、ウィンドウサイズに常にフィットした固定背景なんかも出来ます。

レスポンシブウェブデザインが良いか悪いかわかりませんが、一応小手先のテクニックとして覚えておくと便利だと思います。

んじゃまた。