title: Replace list item with image
body: <p>I would like to replace a list item with an image.</p>
  
  <p>The list item I wish to replace is the first list item class="main-logo".</p>
  
  <p>My questions are as follows. </p>
  
  <p>1.Do I do the replacement on the .main-logo or on the .logo? 2.What is the best technique to replace the list item with image? 3. If i wish to adjust the line-height of the list items, do i adjust the li class, the nav class or the a class?</p>
  
  <p>thanks!</p>
  
  <p><a href="http://jsfiddle.net/codermax/fe0L3d08/4/" rel="nofollow">http://jsfiddle.net/codermax/fe0L3d08/4/</a></p>
  
  <pre><code>&lt;nav class = "side-bar"&gt;
          &lt;ul class ="main-bar"&gt;
              &lt;li class="logo"&gt;&lt;a href="#" class="main-logo"&gt;Logo&lt;/a&gt;&lt;/li&gt;
              &lt;li class="user-nav"&gt;&lt;a href="#" class="big-box"&gt;User&lt;/a&gt;&lt;/li&gt;
              &lt;li class="main-nav"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
              &lt;li class="main-nav"&gt;&lt;a href="#"&gt;Visitor List&lt;/a&gt;&lt;/li&gt;
              &lt;li class="main-nav"&gt;&lt;a href="#"&gt;Visualization&lt;/a&gt;&lt;/li&gt;
              &lt;li class="main-nav"&gt;&lt;a href="#"&gt;History&lt;/a&gt;&lt;/li&gt;
              &lt;li class="divider-nav"&gt;&lt;a href="#"&gt;Manage&lt;/a&gt;&lt;/li&gt;
              &lt;li class="manage-nav"&gt;&lt;a href="#"&gt;Agents&lt;/a&gt;&lt;/li&gt;
              &lt;li class="manage-nav"&gt;&lt;a href="#"&gt;Departments&lt;/a&gt;&lt;/li&gt;
              &lt;li class="manage-nav"&gt;&lt;a href="#"&gt;Shortcuts&lt;/a&gt;&lt;/li&gt;
              &lt;li class="manage-nav"&gt;&lt;a href="#"&gt;Banned Visitors&lt;/a&gt;&lt;/li&gt;
              &lt;li class="manage-nav"&gt;&lt;a href="#"&gt;Triggers&lt;/a&gt;&lt;/li&gt;
              &lt;li class="divider-nav"&gt;&lt;a href="#"&gt;Settings&lt;/a&gt;&lt;/li&gt;
              &lt;li class="settings-nav"&gt;&lt;a href="#"&gt;Widgets&lt;/a&gt;&lt;/li&gt;
              &lt;li class="settings-nav"&gt;&lt;a href="#"&gt;Personal&lt;/a&gt;&lt;/li&gt;
              &lt;li class="settings-nav"&gt;&lt;a href="#"&gt;Accounts&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
     &lt;/nav&gt;
  </code></pre>
  
  <p>the css code.</p>
  
  <pre><code>.main-bar li a {
      display: block;
      width: 100%;
      height: 100%;
      padding: auto 0;
      margin: auto 0;
      line-height: 2.5em;
      text-decoration: none;
      color: white;
      text-align: center;
   }
  
  article {
      width: 60%;
      height: 30%;
      float: right;
      position: relative; 
  }
  
  .logo {
      height: 4em;
  }
  
  a.main-logo {
      background: url(zopim.jpg) no-repeat;
      display: block;
      height: 100%;
      top: 0;
      left: 0;
  }
  
  a.big-box {
      line-height: 7em;
      height: 7em;
  }
  </code></pre>