background画像をレスポンシブ対応

スマホ対応でbackgroundを指定するとき高さがないと表示されません。

背景画像をサイズを可変させて表示したいだけなのですが、backgroundで指定した画像はheightがないと高さが0になって表示されません。
ですが、高さの指定をするとウィンドウサイズの拡大縮小時に余白や画像が見切れたりなどがおきます。

高さが与えられない場合、paddingで余白をあけます。
拡大縮小させるためにpadding-topかpadding-bottomを％指定で設定します。

%の計算方法は

高さ÷横×100=です。