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

参考: Simplicityを少し改造してみた part15 ヘッダーの背景画像をレスポンシブにする

まず画像の比率を計算します。calcでやっても良いですが、まぁ普通に計算しても良いです。
100%:x = 1500:500 = 33.333333333%

この値が領域の高さになります。

#header {
    margin-bottom: 0px; /*任意の値。ナビとの隙間*/
    padding: 0 0 33.333333333%;
    height: 0;
    overflow: hidden;
}
#h-top {
    min-height: initial;
}

このようにすれば画像の比率のまま画面のアスペクト比に合わせてレスポンシブに拡大縮小しますが画面幅が広くなったら画像が大きくなりますし、小さな画面幅の場合は画像も小さくなります。
小さな画面はまぁ良いとして、大きな画面は大きくなりすぎるので、

@media screen and (min-width: 1280px) {
  #header {
    padding: 0 0 20%;
  }
}

などとして高さを制限します。

このように考えると、一定の高さ(1280pxの時にいくつにするか)を設定して画像を作るほうが中身をうまく表示できます。

background-position: coverとすると、足りない方向を拡大して、余ってる方向を切り取ってくれます。横を2000pxなどとして余白を作っておき、画像をセンタリングさせておきます。この時、1280pxに表示したい領域が入るように設計しておくと最大となったとしても表示したい部分は表示され、余白の部分で調整できます。

このようにした場合、今度はスマホの時に全体が入るように調整する必要もあります。

更に、背景画像は複数指定することができます。
サンプル: 背景画像を複数設定する | codepen
※ cssはscssで書いてあります。css欄下向き三角よりview compiledでcssに変換できます。

複数設定する場合、最初に指定するほうが手前になります。

.test {
  background-image:
    url("画像Aのパス"),
    url("画像Bのパス");
  background-repeat:
    no-repeat,
    repeat;
}

こんなふうにして指定できます。背景画像をカスタマイザーで設定すると1枚しか指定できませんが、普通に子テーマstyle.cssをいじればこういうこともできるというわけです。
設定がその分増えるので面倒くさいと言えばですが、画像をレイヤー(層)に分けて配置するといろいろできますよ。

アイデア次第です。

Hidekichiさん、ありがとうございます。お礼が遅くなりすみません

#header と #h-top の変更でとりあえずはうまくいきました。
ただ、画像を変更して比率が変わった場合にCSSも変更するのも何なので
今回はSliderのプラグインに画像表示させてテーマの方は非表示にさせました
PCとスマホを１枚の画像で処理できてるので一応の解決をみました
根本的にはテーマをカスタマイズして解決したいので
それは少し勉強しながら時間をかけてやりたいと思います