title: How to display image in sidebar-wrapper css class
body: <p>I want to display image in #sidebar-wrapper class, i am using following code:</p>
  
  <p>CSS:</p>
  
  <pre><code>#sidebar-wrapper {
    background-image:url('/images/nav.jpg');
    margin-left: -250px;
    left: 250px;
    width: 250px;
    position: fixed;
    height: 100%;
    overflow-y: auto;
    z-index: 1000;
    transition: all 0.4s ease 0s;
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code> &lt;div id="sidebar-wrapper"&gt;
          &lt;ul class="sidebar-nav" id="MainMenu"&gt;
              &lt;li class="sidebar-brand"&gt;&lt;a href="#"&gt;Menu&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;&lt;img src="images/icons/home.png"&gt;HOME&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Menu&lt;/a&gt;
                 &lt;ul class="sidebar-brand"&gt;
                   &lt;li&gt;&lt;a href="navigation.html"&gt;sub menu 1&lt;/a&gt;&lt;/li&gt;
                   &lt;li&gt;&lt;a href="#"&gt;sub menu 2&lt;/a&gt;&lt;/li&gt;
                   &lt;li&gt;&lt;a href="#"&gt;sub menu 3&lt;/a&gt;&lt;/li&gt;
                   &lt;li&gt;&lt;a href="#"&gt;sub menu 4&lt;/a&gt;&lt;/li&gt;
                   &lt;li&gt;&lt;a href="#"&gt;sub menu 5&lt;/a&gt;&lt;/li&gt;
                   &lt;li&gt;&lt;a href="#"&gt;sub menu 6&lt;/a&gt;&lt;/li&gt;
                 &lt;/ul&gt;                  
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Menu&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Menu&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Menu&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Menu&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Menu&lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Image is not being displayed. Any help or reference will be much appreciated.</p>
  
  <p>Regards</p>