「background-imageの難しさは表示スペースと画像の縦横比が合わないから」
とお伝えしてきました。
ってことは縦横比指定できれば、ほとんど解決なんですね。
ということで、アスペクト比（縦横比）を指定できる
aspect-ratio
を使って表示スペースの縦横比指定しちゃえば、背景画像は枠の中にピッタリ収まるんです。
background-sizeはcoverでOK。
（ちなみにcontainでも大丈夫です。が、borderで太い枠線を設定している場合、枠の太さ分ピッタリ収まらないことがあります。ムダに冒険する必要もないでしょう。coverにしましょう。）
これで背景画像が欠けたり、余白が生まれることなくレスポンシブしてくれます。
めっちゃ簡単じゃないですか？
aspect-ratioは