IT系SEによる副業ブログ入門(運用・カスタマイズ)

背景画像をスマフォ用に画面サイズに合わせて表示するスタイルシート(CSS)は?

ヘッダーの背景用にヘッダー画像を用意したのですが、
これがスマートフォンで表示されると画面のサイズに合わせて表示してくれませんでした。
どのようなスタイルシートを設定すると画面サイズに画像を調整してくれるのでしょうか?

 

ヘッダー画像を以下のように「background:」スタイルシートで設定しました

hgroup {
    height: 230px;
    background: url(http://blog.nyuumon.net/wp-content/uploads/2015/01/access-up-200.png) no-repeat scroll bottom left;
}

すると

意図通りに表示されていました。

意図とは異なり、ヘッダーの背景画像の全体が表示されていませんでした。
スタイルが崩れてしまいますね、、、

「background-size:100% auto」で設定すると画面の横幅に合わせて表示される

スタイルシートで以下のように設定します

hgroup {
    height: 230px;
    background: url(http://blog.nyuumon.net/wp-content/uploads/2015/01/access-up-200.png) no-repeat scroll bottom left;
    background-size: 100% auto;
}

 

「background-size」スタイルシート

background-sizeスタイルシートでは、

background-size: 横幅 縦幅;

という指定になります。
今回の「background-size:100% auto」場合は、横幅を100%とし、縦幅を自動設定としました。

この設定以外に

といった指定もあります。
coverは元の画像サイズで表示され、containは自動で縦横サイズが詳細されて表示されます。
なので、今回の画面に合わせてサイズ調整させたい場合は、

background-size:contain;

の方がなおグッドですね!