Background image of Anchor not working with Safari/Firefox

I have following Css where i have used back-ground image. Then i am generating Anchor and assigning css class which has image. It works fine with IE but does not work with Safari,Firefox and Chrome.

Can anyone help me on how to fix it. I have given details below.

CSS

.HOME
{
   BACKGROUND-IMAGE: url(../images/home.jpg);
   WIDTH: 56px;
   BACKGROUND-REPEAT: no-repeat;
   HEIGHT开发者_JAVA百科: 20px
}
.HOME A
{
   WIDTH: 56px;
   HEIGHT: 20px
}
.HOME A:hover
{
   BACKGROUND-IMAGE: url(../images/home1.jpg);
   WIDTH: 56px;
   HEIGHT: 20px
}

HTML

<td class="HOME"><A href="#abc.html" Class ="Home" onclick="OpenPage()"/></td>

background-image is getting be deprecated, I suggest to use:

a.home { background: url(../images/home.jpg) no-repeat; width:56px; height:20px }
a.home:hover { background: url(../images/home1.jpg); width:56px; height:20px }

It would work if you would use the following CSS:

a.home { background-image:url(../images/home.jpg); width:56px; background-repeat:no-repeat; height:20px }
a.home:hover { background-image:url(../images/home1.jpg); width:56px; height:20px }

I was trying to do something similar and found out that adding position: relative or absolute makes it work on Chrome/Safari/Firefox.