2016年11月28日(月)

CSSで背景画像をレスポンシブ対応する方法

• 0
• 38
• 45
• 140

CSSのbackground-size プロパティは、背景画像のサイズを指定できます。
表示領域のサイズに合わせて背景画像が拡大、縮小されるので、レスポンシブサイトの制作に役立ちます。
同じ画像をそれぞれの値で表示したサンプルを作成しました。

サンプルページ

background-size:cover; 縦横比を保持して、表示領域全体を覆うように背景画像を表示する background-size:contain; 縦横比を保持して、表示領域に収まるように背景画像を表示する background-size:値指定 auto; 横幅は指定した値、縦幅は元の比率を保持して自動で表示する background-size:auto 値指定; 縦幅は指定した値、横幅は元の比率を保持して自動で表示する

IEは11以上の対応ですが、最近はレスポンシブの普及によりIEは11のみでOKという案件も増えてきてるので、積極的に使っていきたいところです。

表示領域全体を覆う background-size:cover;

background-size:cover; は縦横比を保持したまま表示領域全体を背景画像で覆うように拡大、縮小します。
画像で全体を埋めたい時に使えます。