ヘッダー背景画像について

その状態を、どのように統一するのかも書いていただけますか。
基本的に、CSSで高さを調節すればできるとは思うのですが、ゴール地点（完成形）がわからないと、ちょっとどのように書くべきか分からないので。
ですので、「パソコンのときは〇〇に」「モバイルの時は〇〇に」といったようにできるだけ詳細に書いているだけると助かります。

これを望むのが普通ではないでしょうか　わいひら様
なかなか伝わらないですかね！！

yaさんの普通が誰にでも普通なわけではありません。
問題を解決するには、なるべく他の人にも問題点をわかりやすいように伝えるということも必要なのではないでしょうか。ブログを書いている人ならなおさら伝えるということは大事かと思います。

そもそも、⑤のパソコンのメニュー要素自体の間隔は上下とも同じです。背景色をメニューと同じにしているから、そのように見えているだけです。
なので、背景色を見えないようにすればメニュー下の余白は消えます。※style.cssに追記

#body {
    margin-top: 0;
}

とりあえず一つずつ。

このフォーラムは書き込みが多くて、普段時間がなくて、返信があって上に上がってくるトピックにしか返信していないもので忘れていました。

基本的に①～④の動作はSimplicityの仕様です。モバイル画面ではモバイルヘッダーの設定をする必要があります。ご要望のように画像に合わせて変更するにはjQueryで処理を書く必要があります。

多分、子テーマのjavascript.jsにこんな感じで追記すればいけるんじゃないかと思います。

(function($){
  $(window).resize(function(){
    var w = $(window).width();
    //画像のサイズから高さの比率を計算（1080/1920=0.5625）
    var h = w * 0.5625;
    //データの高さが700以上になる場合は700pxとする
    if (h >= 700) {
      h = 700;
    }
    $('#h-top').css('min-height', h + 'px');
  });
})(jQuery);

※上記を適用する場合は、モバイルでのヘッダー画像の設定とかは不要かも。
※カスタマイザー設定や画像サイズが変わったら書き直す必要あり

こちらのサイトの設定状態を完全に把握しているわけではないので、カスタマイザーの設定によっては不具合が出るかもしれません。とりあえずコードを適用してみて不具合が出るかを確認してみてください。