Twenty Elevenはデフォルトではヘッダー背景は設定されていません。
※ ヘッダー内に画像は表示されますが、背景ではありません。
シンプルで爽やかなのですが、シンプルすぎる感もあります。
そこで、Twenty Elevenのヘッダーに背景を設定してみようと思います。
背景画像を準備
まずは、背景画像を準備しましょう。どんなものでも構いませんが、高さが100px程度のものがバランスがいいような気がします。
私は今回は7 x 100 pxの画像としました。
子テーマのスタイルシート編集
今回は、数段階の編集を行います。下記条件下でのスタイルシートとなっております。
- 背景画像名:header.gif
- 画像のディレクトリ:テーマフォルダ/images/
- ヘッダーのサイトタイトル部分に横に繰り返し表示
背景画像設定
まずは、ヘッダー部分に背景画像を設定します。#page{background: url(images/header.gif) repeat-x top left;} |

ヘッダーの白かった部分や、記事の方まで背景色が変わってしまいました。
えらいこっちゃです。
そんなわけで先ほどの部分を
#page{ background: url(images/header.gif) repeat-x top left; background-color: #fff; } |
として、背景色の設定を加えます。

背景色は、もちろん自分の好きな色も設定できます。
準備した背景画像は、高さ100pxなのですがヘッダー部分の高さと合っていないために、表示が中途半端になっていまっていますね。
次は、これを修正します。
ヘッダータイトル部分の高さを設定
#branding hgroup{height: 98px;} |

背景画像の高さより2px程小さく設定すると余分な線が入らなくていい感じになります。
しかし、文字が隠れてしまっていて実用はできませんね。
サイトタイトルを上に移動
#site-title{padding: 10px;} |

数値を変更すれば、位置が変わりますのでお好みの位置を探し当ててください。
サイトタイトルと紹介文をそろえる
#site-description{padding-left: 10px;} |

ここでの設定数値は、サイトタイトルを上に移動で設定した数値と同じになるようにして下さい。
サイトタイトルを左に移動
#branding hgroup{margin: 0 2%;} |

私は、タイトルが左寄りでないと気がすまないのでこのコードを加えました。
もちろん、数値を変えれば表示位置も変わります。
おしゃれなサイトを創りあげよう
美的センスは人それぞれですので正解はないと思いますが、自分で満足できるようなデザインが大事だと思います。毎日の更新が楽しくなるような、そんなデザインを目指して頑張りましょう!
関連記事

WordPressのデフォルトテーマにもなったTwenty Elevenをカスタマイズし、個別記事や固定ページを1カラムで横幅目一杯で表示する方法です。