HTML/CSS:レスポンシブ対応した背景画像設定

【概要】

1. 結論
2. どのようにコーティングするか
3. 注意しないといけないこと
4. 開発環境

1.結論

background-size: cover;を使用する！

2.どのようにコーティングするか

<header class="header" id="image">
</header>

# image {
  background-image: url("../img.png"); /* ---1 */
  background-size: cover; /* ---2 */
  background-repeat: no-repeat; /* ---3 */
}

1. ../で相対パス指定をしています。./においてはカレントディレクトリ、/から始まるのは絶対パスになり、このファイルのおおもとであるルートディレクトリを示します。
2. coverは、縦横比を保ちつつ、背景全体を最小で完全に表示した状態で拡大縮小します。他にもcontain autoがあります。
3. no-repeatは画像を1枚のみ表示したいのでこのようにしています。

3.注意しないといけないこと

HTMLのdivタグにおける表示サイズと画像解像度で大きすぎて全体の背景画像が表示されないことがあります。小さすぎてみずぼらしくなるので画像自体の調整が必要です。

4.開発環境

HTML5
CSS3