Buenas, tengo una consulta, ¿Cómo puedo lograr que una imagen se establezca como fondo en un elemento de mi `navbar`? lo  he intentado de esta manera

    <nav class="navbar navbar-default navbar-inverse "  >
    <div id="navigation">
      <ul class="nav nav-pills">
         <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" >
              <h4 >MENU <b class="caret"></b></h4>
            </a>
            
            <ul class="dropdown-menu" >
              <li class="dropdown-header" ><a href="#" ><h4>PRODUCTOS</h4></a></li>
              <li class="divider"></li>
              <li><a href="pacas.html"><h4>Pacas Credenciales</h4></a></li>
            </ul>
          </li>
 
         <li role="presentation" ><a href="locacion.html"><h4> LOCATION</h4></a></li>
         <li role="presentation" ><a href="dama.html"><h4> CONTACTANOS</h4></a></li>
         <li role="presentation" ><a href="index.html" class="a"><h4 class="h"><img class="imagen" src="assets/images/home.png"></h4></a></li>
         
         

      </ul>
   </div>
  </nav>

Y este es mi codigo css:

.imagen{
	margin: 0;
    display:inline-block;
    height: 18px;
    float:none;

}

Pero la imágen no abarca todo el elemento ya que se visualiza asi

[![introducir la descripción de la imagen aquí][1]][1]


  [1]: https://i.sstatic.net/6qNys.png

Pero yo desearía que todo ese cuadro sea la imagen del icono Home y no que se vea tan pequeña la imagen, he intentado jugar con el tamaño de la imagen pero no logro adaptarla ya que si incremento el tamaño se distorsiona y se torna mas grande que los demás elementos, ¿Alguna sugerencia? Estoy usando Bootstrap.