ヘッダーナビに背景画像を表示しよう

ヘッダーナビの背景には「#9a9a9a」という色が指定されています。 画像を指定する記述を加え背景に画像を表示しましょう。

1. 画像を用意

幅750×高さ25の画像（header_1.gif）をフォルダ「images」用意します。 （画像は全て「自分専用のテンプレートを作ろう」の手順4で作成したフォルダ「images」に保存してくださいね。）

2. ソースの書き換え

CSSの220行目「#navMainWrapper, #navSuppWrapper, #navCatTabsWrapper」とあります。 今のままですとヘッダーナビ（#navMainWrapper）以外も一緒に指定されているので3つを個別に書きかえます。

変更前

#navMainWrapper, #navSuppWrapper, #navCatTabsWrapper {
	margin: 0em;
	background-color: #9a9a9a;
	font-weight: bold;
	color: #ffffff;
	height: 1%;
	width: 100%;
	}

変更後

#navMainWrapper {
	margin: 0em;
	background-color: #9a9a9a;
	font-weight: bold;
	color: #ffffff;
	height: 1%;
	width: 100%;
	}
	
#navSuppWrapper {
	margin: 0em;
	background-color: #9a9a9a;
	font-weight: bold;
	color: #ffffff;
	height: 1%;
	width: 100%;
	}
	
#navCatTabsWrapper {
	margin: 0em;
	background-color: #9a9a9a;
	font-weight: bold;
	color: #ffffff;
	height: 1%;
	width: 100%;
	}

次にCSSの220行目「#navMainWrapper」に画像（header_1.gif）を指定する記述「background: url(../images/header_1.gif) left top no-repeat;」を加え上書き保存します。

変更前

#navMainWrapper {
	margin: 0em;
	background-color: #9a9a9a;
	font-weight: bold;
	color: #ffffff;
	height: 1%;
	width: 100%;
	}

変更後

#navMainWrapper {
	margin: 0em;
	background-color: #9a9a9a;
	font-weight: bold;
	color: #ffffff;
	height: 1%;
	width: 100%;
	background: url(../images/header_1.gif) left top no-repeat;	
	｝

3. オンラインショップで確認

ブラウザの更新をクリックし確認します。ヘッダーナビに背景画像が表示されました。