As proporções da imagem teriam algo a ver com o problema?

#menu {
background: black;
width: 100%;
height: 45px;
}
#menu ul {

text-decoration: none;
list-style-type: none;

}

#menu li {
text-decoration: none;
display: inline;
font-size: 30px;
padding-left: 30px;
}
#menu a:hover {
   background-image: url(images/hover.png);

}
#menu a {
text-decoration: none;
color: white;
margin: auto
  background-repeat: bo-repeat;
  background-position: top center;
  background-size: contain;

}

Ao passar o mouse, ele repete as imagens várias vezes. A imagem é de 2000 x 500 px. Como posso fazer com que essa imagem seja exibida atrás da palavra no meio e não se repita. Obrigado

Esta é a imagem pairarligação

o código html

<div id="menu"> 
<ul>
<li><a href="index.html"> Home</a></li>
<li> <a href="#"> lalal</a></li>
</ul>
</div>