Current Page indicator – Navigation w/ images ??

Hi,
I’m having trouble getting indicating the current page on this website: https://www.mattallyn.com. I can get the current_page_item class to work, if the nav were text-based. But it’s not working when I try to apply it to the sprite image CSS code I use for the nav. Any thoughts?

Here’s the header.php nav:

<ul id= "navigation">

    <li id="navigation-1"<?php if ( is_home() || is_single() || is_search()  ) { echo ' class="current_page_item"'; } ?>>   <a href="<?php echo get_settings('home'); ?>" title="Click for Home">blog</a></li>
     <li id="navigation-2"<?php if ( is_page('2')) { echo ' class="current_page_item"'; } ?>><a href="/?page_id=2">about</a></li>
     <li id="navigation-3"<?php if ( is_category('7')) { echo ' class="current_page_item"'; } ?>><a href="/?cat=7">portfolio</a></li>
     <li id="navigation-4"<?php if ( is_page('9'))  { echo ' class="current_page_item"'; } ?>><a href="?page_id=9">contact</a></li>

</ul>

Here’s the CSS:

ul#navigation {
		width:450px; /*413*/
		list-style:none;
		height:38px;
		margin-left:-2px; /*0px, was 103*/
		margin-top: -1px;
		float:left;
}

ul#navigation li {
	display:inline
}

ul#navigation li a {
	height:38px;
	float:left;
	text-indent:-9999px;
	text-decoration:none
}

ul#navigation  li a span {
	float:left;
	display:block
}

ul#navigation li#navigation-1 a {
	width:83px;
	background:url(images/Matthew-nav2.jpg) no-repeat 0px 0
}

ul#navigation li#navigation-1 a:active,
ul#navigation li#navigation-1 a:hover {
	background-position:0px -38px
}
ul#navigation li#navigation-1 .current_page_item {
	background-position:0px -76px;
	background-color: yellow;
}

ul#navigation li#navigation-2 a:link {
	width:96px;
	background:url(images/Matthew-nav2.jpg) no-repeat -83px 0;
}

ul#navigation li#navigation-2 a:active,
ul#navigation li#navigation-2 a:hover {
	background-position:-83px -38px
}
ul#navigation li#navigation-2 .current_page_item {
	background-position:-83px -76px
}

ul#navigation li#navigation-3 a {
	width:122px;
	background:url(images/Matthew-nav2.jpg) no-repeat -179px 0
}

ul#navigation li#navigation-3 a:active,
ul#navigation li#navigation-3 a:hover {
	background-position:-179px -38px
}
ul#navigation li#navigation-3 .current_page_item {
	background-position:-179px -76px
}

ul#navigation li#navigation-4 a {
	width:113px;
	background:url(images/Matthew-nav2.jpg) no-repeat -301px 0
}

ul#navigation li#navigation-4 a:active,
ul#navigation li#navigation-4 a:hover {
	background-position:-301px -38px
}
ul#navigation li#navigation-4 .current_page_item {
	background-position:-301px -76px
}

Any help would be very much appreciated! Thanks much.