PC版とスマホ版のヘッダー画像について

はじめまして、小田と申します。

現在こちらのsimplicityのテーマを使わせていただいております。
ひと通りの設定が終わり、シンプルで纏まりのあるブログにできたかなと満足しています。
ただ、一つだけブログ内検索などをしてもどうしても解決できない部分がありフォーラムにて質問させていただきます。
(※私はテーマを弄ったりするような知識が殆ど無いので、もし初歩的な質問だったら申し訳ありません。)

タイトルの通りPC版とスマホ版のヘッダー画像についてです。
現在完全レスポンシブで1070px×200pxのヘッダー画像を設定しているのですが、
スマホで見ると縦は200pxのままですが、横が左部分を残し300px程度の大きさに切れて表示されてしまいます。
スマホを横にすると見えない部分が少し表示されますが、やはり不格好です。

そこで色々試した所、ヘッダー画像には何も設定せずに、
ヘッダー外側背景画像とモバイルヘッダー背景画像に画像を設定するとスマホ版でもサイズに合った画像になってくれます。
ただその設定だとPC版の画像が横いっぱいに拡大表示されたり、
ブラウザのウィンドウサイズによって画像の大きさが変化してしまい、イメージ通りになりません。
ヘッダー画像を設定しつつ、モバイルヘッダー背景画像も別の画像を設定してスマホで見ると一瞬だけ背景画像が表示されますが、
すぐにヘッダー画像の方が上層に表示されてしまいます。(当然ですが・・・)
それに完全レスポンシブは非常に気に入っているので、できればここは変えずにどうにかしたいです。

素人ですが、自分なりに考えた解決方法は、
・スマホ版はヘッダー画像の表示位置を画面の中央に揃えるようにする。
・スマホ版ではヘッダー画像を表示せずモバイルヘッダー背景画像のみ表示する。
・ヘッダー外側背景画像のサイズを横いっぱいにせず、横幅を固定する。
もし以上のどれかができればイメージ通りになると思ったのですが、どうでしょうか？
それ以外にも解決方法があればよろしくお願い致します。