背景画像を設定する際に使用するプロパティは以下
auto
自動的に算出される（初期値）
contain
縦横比は保持して、背景領域に収まる最大サイズになるように背景画像を拡大縮小する
cover
縦横比は保持して、背景領域を完全に覆う最小サイズになるように背景画像を拡大縮小する
長さ
背景画像の幅・高さを指定する
パーセンテージ
背景領域に対する背景画像の幅・高さのパーセンテージを指定する
僕がよく使用する記述
今回、行いたかったのは背景画像を可変させること
こちらの記事に詳細は記載されていますが、
http://www.go-next.co.jp/blog/webdesign/html_css/css3/1736/
実際の記載
/* 例:幅640px高さ360pxの画像の場合 */
#header{
height: 0;
/* 表示画像の高さ ÷ 表示画像の幅 × 100 */
padding-top: 56.25%;
background: url('bg.png') 0 0 no-repeat;
background-size: contain;
}
高さを0に指定して、paddingで領域を確保しています。
計算式は
表示画像の高さ÷表示画像の幅×100
（例
150÷400×100 = 37.5％
ということです。
で値は算出できました。
あとはレイアウトを組んでいくのみで便利です。
Originally posted 2016-03-17 11:12:08.