ちょっと小さく、あ、いやごめん。大きくして
今まで背景画像のサイズ変更はできないものとしてやってきています。
ですがCSS3ではその背景画像のサイズおも変更することができるのですね!
background-sizeを使用します。
background-size
指定できるのは4パターン
- auto
- contain
- cover
- 長さ指定
指定パターンの解説!
auto
こいつは初期値です。
サイズは自動算出されます。
contain
縦横比は保持して、背景領域に収まる最大サイズになるように背景画像を拡大縮小する
cover
縦横比は保持して、背景領域を完全に覆う最小サイズになるように背景画像を拡大縮小する
長さ
縦横比は保持して、背景領域を完全に覆う最小サイズになるように背景画像を拡大縮小する
ちなみに、【横 縦】
横80px 縦50px
横20% 縦40%
横auto 縦40%
横40% 縦auto
inherit
親要素の値を継承します。
親で使われている場合はソレを使うようにするんですね。
地味なのでデモはありません。