/* =HTML
-------------------------------------------------------------- */
<div class="haven">
<a href="#">
<img src="<?php bloginfo('template_directory'); ?>/images/haven_g.png" alt="" title="brookhaven_logo"/>
</a>
</div>

/* =CSS
-------------------------------------------------------------- */
div.haven {
height: 44px;
width: 278px;
margin:0;
padding:0;
background-image:url("images/haven.png");
}

div.haven a, div.nav a:link, div.nav a:visited {
display:block;
}

div.haven img {
width:100%;
height:100%;
border:0;
}

div.haven a:hover img {
visibility:hidden;
}

The top image cant be a PNG.  This is because the code just make the top image disappear and if the PNG has a transparency to it you will be able to see right through it.

CSS Image Replace

image, replace

CSS