Bild bei Hover Link

[Käsebrötchen]

Also, ich habe einen <div> teil auf der homepage, der mit einem hintergrundbild versehen ist, welches 150 px breit ist.
darauf stehen dann verschiedene links, die zentriert sind...
ich mächte jetzt, wenn man über einen link fährt, dass ein anderes, auch 150px breites bild das hintergrundbild "überschreibt"
versucht hab ich das mit folgendem code:

a:hover.navi {
   color: #ffffff;
   background-image:url("images/liston.jpg");
   background-size: 150px;
   background-repeat:no-repeat:
   background-position:left;
   text-decoration: bold;
}

jetzt kommt da leider nur immer ein teil des bildes, da die links unterschiedlich lang sind etc und das sieht sehr...schlecht aus um es mal gnädig zu sagen

kann mir jemand helfen, dass es so ist, wie ich es haben will?
mfg
käsebrötchen