センターブロックのデザインを変えよう

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

1. 画像を用意

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

2. ソースの書きかえ

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

変更前

.centerBoxHeading {
	margin: 0em;
	background-color: #FF6699;
	padding: 0.5em 0.2em;
	}

変更後

.centerBoxHeading {
	margin: 0em;
	background-color: #FF6699;
	padding: 0.5em 0.2em;
	background: url(../images/centerbox.gif) left top no-repeat;
	}

3. 確認

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