カテゴリー毎にヘッダ画像をCSSで変更したい

カテゴリー毎にヘッダ画像をCSSで変更する方法　をみてやってみたのですがヘッダー画像に何の変化もみられませんでした。

ブログは初めてのことでありphpもcssも全く経験がありませんで、エビスコム著「レッスンブック」を頼りに勉強を始めたばかりの者です。

どのようにしたら画像を表示できるようになるのでしょうか？。お教え願います。

=========　header.php ==================================

<!-- ヘッダー -->
<div id="header">
<h1><a href="<?php echo home_url(); ?>">
<?php bloginfo('name'); ?></a></h1>
<p id="desc"><?php bloginfo('description'); ?></p>

<?php if(!(is_page('ホーム'))): ?>
<p id="image"><img src="<?php bloginfo('template_url'); ?>/header.jpg" alt="*" width="760" height="200" /></p>

<!-- ここから追加した部分 -->
<?php elseif( is_month() ) : // 月別ページの場合 ?>
<?php else : // それ以外の場合
$cat = get_the_category();
$cat = $cat[0];
?>
<div class="cat-<?php echo $cat->cat_ID; ?>"></div>
<!-- ここまでが追加した部分 -->

<?php endif; ?>
</div>

=========== style.css ==============================

/* ヘッダー */
div#header h1	{font-size: 1em;
		margin-top: 0px;
		float: left;
		margin-bottom: 3px}
div#header h1 a	{text-decoration: none;
		color: #00008b}

div#header p#desc	{font-size: 0.94em;
			color: #444444;
			margin: 0;
			float: right;
			margin-top: 5px}

div#header	{border-bottom: none;
		padding-bottom: 0px;
		margin-bottom: 0px}
div#header p#image	{margin: 8px 0 0}

/* ここから追加　*/
.cat-1 {
background:url(Biei1.jpg) no-repeat;
width: 760px;
height: 200px;
}
.cat-6 {
background:url(Biei2.jpg) no-repeat;
width: 760px;
height: 200px;
}
.cat-7 {
background:url(Biei3.jpg) no-repeat;
width: 760px;
height: 200px;
}