タイトル通り背景画像background-colorを用いた可変背景のやり方の実装を書いていく.
可変背景とはつまり、ウィンドウを大きくしても小さくしても縦横比が変わらないようになる状態です。
HTMLを以下の様に記述する
<divclass="main"></div>cssを以下の様に記述する
.main{background-image:url('参照パス');background-size:cover;padding-top:62.75%;}解説
1.background-size:cover;を必ず指定する
指定しなければ、ブラウザが画像サイズ以上に大きくなった際にリピートしてしまうため。
2.padding-topの指定
値の指定には計算をします。
画像の縦幅÷画像の横幅×100 = %
これらの数値は画像を右クリックで選択し情報を見るから閲覧出来ます。
例)1004÷1600×100 =62.75%
