HOME > > > CSSで背景画像を100%で表示する方法をまとめました

CSSで背景画像を100%で表示する方法をまとめました

CSSで背景画像を100%で表示する方法をまとめました

背景画像を設置する方法は色々

背景画像を使用する際方法は色々とありますね。
レスポンシブWebデザインを使用した際は背景画像を使う事も多いと思います。
今回は同じ背景画像を使った場合に幅一杯に背景を設置する方法をご紹介します。

設定は簡単。背景のサイズを100%にするだけ

設定はとっても簡単です。CSSで背景のサイズを100%にするだけ。
と言っても設定方法は「auto」「contain」「cover」「縦100%・横100%」の4種類。
デザインにあった使い方をオススメします。

autoを使用した場合

縦横比を保持し、autoを設定した方は自動設定になります。


background-size:100% auto;/*この場合は高さが自動設定*/
background-size:auto 100%;/*この場合は幅が自動設定*/

containを使用した場合

背景画像の縦横比を保持したまま、背景画像の全体が表示されます。


background-size:contain;

coverを使用した場合

背景画像の縦横比を保持したまま、ブラウザにピッタリ表示されます。
比率上長い方がはみ出す様にフィットします。


background-size:cover;

縦100%・横100%を使用した場合

背景画像の縦横比は保持できません。 背景画像が伸びたり、潰れたりして全体を表示します。


background-size:100% 100%;

このページを共有する

Facebook
twitter
Line
googleプラス
はてなブックマーク
Pocket

2014.08.17