サイト全体のイメージがガラッと変わりますので、
いろいろ試してみましょう。
それでは、無料プレゼントで配布している
「レスポンシブWEBデザイン」のHTMLテンプレートで
ヘッダの背景画像を変更する手順を紹介します。
（１）ヘッダの背景画像を作成する。
画像編集ソフトなどを使って、
縦200px
横1170px
の大きさで画像を作成してください。
ファイル名は、「header_bg.jpg」で保存すると、
デフォルト画像と置き換えるだけですみます。
違うファイル名で保存する場合は、
スタイルシート「style.css」を編集する必要があります。
ここでは、別の名前「header_bg2.png」にしてみます。
ちなみに画像の縦サイズを変更する場合は、
同様にスタイルシートの変更も必要となります。
例として、
縦280px
横1170px
で画像を作成してみます。
↓ 作成した画像はこちら
（２）テンプレート・ファイル「style.css」の19行目あたりを探して
/* -----------------------------------------------------------------------------
ヘッダー
-------------------------------------------------------------------------------- */
#header {
background: url(images/header_bg.jpg);
height: 200px;
margin: 10px auto;
}
↓
/* -----------------------------------------------------------------------------
ヘッダー
-------------------------------------------------------------------------------- */
#header {
background: url(images/header_bg2.png) right;
height: 280px;
margin: 10px auto;
}
に変更。
backgroundに「right」を追加しています。
これは、画面サイズが小さくなったとき、
この「right」がないと右側の部分が隠れてしまうため、
右固定にしてみました。
（３）先ほど作成したヘッダー背景画像ファイル「header_bg2.png」を、「images」フォルダにアップします。
以上で、ヘッダ背景画像が変更されたはずです。
⇒ 実際のサイトを見る