フッターのデザインを変えよう

フッタの背景には「#FF6699」」という色が指定されています。画像を指定する記述を加え背景に画像を表示しましょう。

1. 画像を用意

幅750×高さ55の画像（footer.gif）をフォルダ「images」に用意します。

2. ソースの書きかえ

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

変更前

#navSuppWrapper {
	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%;
	background: url(../images/footer.gif) left top no-repeat;
	}

3. 確認

ブラウザの更新をクリックし表示を確認します。 画像が表示されました。