如何在边栏包装css类中显示图像

Question

我想在#sidebar-wrapper类中显示图像，我使用以下代码:

CSS:

#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;
}

HTML:

 <div id="sidebar-wrapper">
        <ul class="sidebar-nav" id="MainMenu">
            <li class="sidebar-brand"><a href="#">Menu</a>
            </li>
            <li><a href="#"><img src="images/icons/home.png">HOME</a>
            </li>
            <li><a href="#">Menu</a>
               <ul class="sidebar-brand">
                 <li><a href="navigation.html">sub menu 1</a></li>
                 <li><a href="#">sub menu 2</a></li>
                 <li><a href="#">sub menu 3</a></li>
                 <li><a href="#">sub menu 4</a></li>
                 <li><a href="#">sub menu 5</a></li>
                 <li><a href="#">sub menu 6</a></li>
               </ul>                  
            </li>
            <li><a href="#">Menu</a>
            </li>
            <li><a href="#">Menu</a>
            </li>
            <li><a href="#">Menu</a>
            </li>
            <li><a href="#">Menu</a>
            </li>
            <li><a href="#">Menu</a>
            </li>
        </ul>
    </div>

没有显示图像。如有任何帮助或参考，我将不胜感激。

对

Answer 1

尝试使用这个，它应该工作良好:

#sidebar-wrapper {
  background:url(/images/nav.jpg) no-repeat center; //  an maybe the quotes are not necessary. Check if the path is correct!
  background-size: cover; //  change this to 'contain' if you want to test different modes
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  margin-left: -250px;
  left: 250px;
  width: 250px;
  position: fixed;
  height: 100%;
  overflow-y: auto;
  z-index: 1000;
  transition: all 0.4s ease 0s;
}