title: Change background image on hover
body: <p>Would the proportions of the image have anything to do with the problem?  </p>
  
  <pre><code>#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;
  
  }
  </code></pre>
  
  <p>On hover it repeats the images multiple times. The image is 2000 x 500 px. How can I make it so that this image is displayed behind the word in the middle and not repeat. Thank you</p>
  
  <p>This is the image hover
  <a href="http://s16.postimg.org/nvb98nngl/hover.png" rel="nofollow">link</a> </p>
  
  <p>the html code</p>
  
  <pre><code>&lt;div id="menu"&gt; 
  &lt;ul&gt;
  &lt;li&gt;&lt;a href="index.html"&gt; Home&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt; &lt;a href="#"&gt; lalal&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>