title: CSS: background-position not working
body: <p>I'm trying to get the nav-bar to position over the image using CSS. Yet, I cannot seem to get the position right, what keeps happening is that the first 200px of the image keep showing up instead of the next 200 px from the background positioning, if that makes any sense. Here is the code please help.</p>
  
  <p>HTML:  </p>
  
  <pre><code>&lt;div id="topnav"&gt;
    &lt;ul&gt;
      &lt;li id="nav-home"&gt;&lt;a href="index.html"&gt;Feature Product&lt;span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li id="nav-all"&gt;&lt;a href="shop_owners.html"&gt;All Products&lt;span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li id="nav-how"&gt;&lt;a href="all_products.html"&gt;How It Works&lt;span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#topnav {
    position: relative;
    left: 150px;
    top: 100px;
    margin: 0;
    padding: 0;
    height: 50px;
  }
  
  #topnav ul {
    list-style-type: none;
    text-align: center;
    line-height: 50px;
  }
  
  #topnav ul li {
    float: left;
  }
  
  #topnav ul li a {
    background: url(../nav-bar-2.png);
    background-repeat: no-repeat;
    display: block;
    height: 50px;
    position: relative;
  }
  
  #nav-home {
    width: 200px;
  }
  
  #nav-all {
    width: 200px;
    background-position: -200 0px
  }
  
  #nav-how {
    width: 200px;
    background-position: -400px 0px
  }
  
  #topnav ul li a span {
    background: url(../nav-bar-2.png) no-repeat scroll bottom left;
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    height: 50px;
    width: 100%;
    z-index: 100;
  }
  
  #topnav li a span:hover {
    cursor: pointer;
  }
  
  #nav-home span {
    background-position: 0px -50px
  }
  
  #nav-all span {
    background-position: -200 -50px;
  }
  
  #nav-how span {
    background-position: -400 -50px;
  }
  </code></pre>