スマホのヘッダーの表示につきまして

@media screen and (max-width: 440px){
  #site-title{
    background-image: url("画像のパス");
    background-position: center center;
    background-repeat: no-repeat;
    //site-titleのサイズやら←ここ重要(幅だけでなく高さも必要)
  }
}

子テーマstyle.cssに書くならこんな感じです。mobile.cssの場合はモバイルの時だけ読み込まれるcssなので、メディアクエリはいらないかも知れません。ただしタブレットとスマホを分けるのであればメディアクエリは必要かと思います。

問題点としては、どれぐらいの大きさの画像で、縦横サイズは何pxにして、その比率はどうするか等の仕様が必要になるかと思います。
作った画像の比率のまま利用するなら、width: 任意px; height: auto;で良いかと思います。
background-imageは画像を入れる親要素(今回の場合は#site-title)のサイズに入ります。これまではサイトタイトルが入っていたのでそれが要素を押し広げていましたが、おそらく文字を透過させるか(できるかはやってみないとアレですが)しないと、高さが必要になります。逆に任意のサイズにできる部分でもあります。

@media screen and (max-width: 440px){
  #site-title{
    background-image: url("画像のパス");
    background-position: center center;
    background-repeat: no-repeat;
    //site-titleのサイズやら←ここ重要(幅だけでなく高さも必要)
    color: transparent;
  }
}

これが可能なら文字が透過するかと思います。テキストだけ透過できない場合はjQueryでタイトルを無くして、高さを設定し、#site-titleに画像を入れるか、あるいは別の要素をjQueryで挿入して、タイトルに重ねる等で実現することもできます。

SEO的にはタイトルが必要という場合もあるでしょうから(僕はなくても大丈夫と思いますけれども)、そういった場合は、画像にjQueryでaltやtitle属性を追加したりするだけでも良いかも知れません。

ひとまずどういった画像を、どのように(例えばセンタリングするとか、要素の位置等)配置するか等の仕様を考えてみて下さい。

Hidekichi様
詳しい解説ありがとうございます！

画像の大きさ、比率など含めて、ちょっと色々試してみたいと思います!