追加CSSで
.site-header h1{background-image: url(画像のアドレス);}
これでいけると思います。
参考まで。
今やりましたが、写真が一部しか表示されません。写真の上部が表示されます。
写真のサイズを指定して写真全体を表示させることは出来ますか？
タイトルの背景の背景の部分なので、当然ながらタイトルの文字数やサイズなどによってその部分の大きさが変化します。
無理矢理するとすれば、サイズ（widthやheight）を与えてあげればいけると思います。
そのへんは、ブラウザのデベロッパーツールを使いながらやればよくわかると思います。
無理矢理で画像全体を表示させたいです。
widthを使っても画像全体を表示出来ません。
ちなみに画像のサイズはいくつですか？
そもそも、twenty twelveのデフォルトで設定がしてあるので、
その画像が表示できるように対症療法で変更していっても、他のところも変更しなければいけなくなって、
支障が出てくると思います。
もう一度書きますが、、ブラウザのデベロッパーツールを使って構造とか理解しながらやられた方がいいと思いますよ。
twenty twelveのヘッダー画像と同じサイズです
960 × 250 ですか？
.site-header h1{
width: 960px;
height: 250px;
background-image: url(画像のアドレス);}
これで入ると思います。
今実行しました。
確かに表示されましたが、写真の上部しか表示されませんでした。
写真全体を表示したいです。
また、このコードを使うと、キャッチフレーズとタイトルが離れてしまいます。
＞写真の上部しか表示されませんでした
そうですか、
こちらの環境では表示されています。
＞キャッチフレーズとタイトルが離れてしまいます
どうデザインされたいか、わたしにはわからないので……、
その辺は考慮せずに書かせていただきました。
お役に立てずに申し訳ありません。
こんにちは、
画像の一部が表示されているなら
.site-header h1{
height: 0;
background: url(画像URI);
padding-bottom: 20%;
background-size: contain;
background-repeat: no-repeat;
}
スタイルの要所
padding-bottom の値の計算方法
（画像の高さ / 画像の幅）* 100 した値にパーセントを付けてみてください
