html5 - Empty div and clickable url -

i have background 2 urls, 1 showing regular state , hover state. div empty , width , height set 50px. added padding see if help, did not.

<div class="container_12 clearfix"> <div class="grid_12"> <p id="footer-center"> <a href="#top" class="top-btn" id="back-to-top"><div class="hover-btn"></div><!--<img src="images/back-to-top-a.png" class="a">--></a> </p> </div> <!-- end grid_4--> </div> <!-- end container_12 -->   .hover-btn{ display:block; width:50px; height:50px; margin-left:50%; }  .hover-btn{ background:url(../images/back-to-top-a.png) no-repeat center center; }  .hover-btn:hover{ background:url(../images/back-to-top-b.png) no-repeat center center, url(../images/back-to-top-a.png) no-repeat center center; 

simply replacing hover-btn div img tag show first image , second on hover.

<img src="" class="hover-btn">