背景画像の拡大・縮小ができないものかと探していたらCSS3で実現可能だということで覚書。
IE8では表示はされるが拡大縮小されなかった。IE9は未確認。
Firefox、Safari、Google Chrome、Operaは○
こちらの記事を参考にさせていただきました。
div{
background-image:url(画像URL);
background-position:center top;
background-repeat:no-repeat;
-moz-background-size:cover;
background-size:cover;
}
背景画像の縦横比を保持したまま、指定要素に背景画像が常にある形でフィット
（はみ出た部分は見えない）。
-moz-background-size:contain; background-size:contain;
背景画像の縦横比を保持したまま、常に背景画像の全体を表示
-moz-background-size:100% 100%; background-size:100% 100%;
背景画像の縦横比を保持しないタイプ
-moz-background-size:100% auto; background-size:100% auto;
幅100％、高さは自動設定
-moz-background-size:auto 100%; background-size:auto 100%;
高さ100％、幅は自動設定。
この間スマホから見たら背景画像が拡大縮小されずにデザインされてるのをみて
ダサイな…と反省したので今後にいかしたいと思う。（自分の話）
