1

¿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>

Y este es mi código CSS:

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

Pero la imagen no abarca todo el elemento ya que se visualiza así.

introducir la descripción de la imagen aquí

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 .

5
  • 1
    pero si usas una imagen pequeña para que se expanda y ocupe todo el espacio esta se va a pixelar, viendose de forma incorrecta Commented el 25 abr. 2016 a las 4:55
  • Es un icono el que estoy utilizando, deberia usar una imagen grande? Commented el 25 abr. 2016 a las 4:57
  • un .png no es un icono, sino debria llevar la extension .ico. Aconsejaria uses una imagen mas grande. Despues puedes asignar las propiedades width o heigth w3schools.com/tags/att_img_width.asp para definir las dimensiones Commented el 25 abr. 2016 a las 4:59
  • Gracias por el consejo Commented el 25 abr. 2016 a las 5:02
  • Ya intente con una imagen mas grande y no funciona Commented el 25 abr. 2016 a las 5:05

2 respuestas 2

2

En el ejemplo

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<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" width="30" heigth="30" src="https://cdn1.iconfinder.com/data/icons/MetroStation-PNG/128/MB__home.png"></h4></a></li>



  </ul>

puedo adaptar perfectamente mediante la definicion del width y heigth las dimensiones de la imagen

2
  • Esto no soluciona el problema. Si la imagen es más grande (como por ejemplo la imagen que usas), puedes ver como la barra de menú se "distorsiona" haciéndose más alta porque esa opción del menú es más grande (y eso es lo que OP quiere evitar).
    – Alvaro Montoro
    Commented el 25 abr. 2016 a las 16:17
  • Para evitar que la imagen distorsione se debe asignar atributos relativos: { height: 100%; width: auto; } posiblemente sea mejor asignar un porcentaje menor a la altura (ej: 90%) de esta manera nunca desbordará. Ahora bien si el botón es mas alto que ancho se debe invertir la asignación.
    – quevedo
    Commented el 10 oct. 2019 a las 3:54
0

Una posible solución para que al cambiar el tamaño de la imagen no te cambie el tamaño de la barra del menú (ese es el verdadero problema, ¿no?) sería utilizar una imagen de fondo en lugar de poner la imagen junto al texto.

De este modo puedes cambiar el tamaño de la imagen de fondo usando background-size (donde podrías añadir valores númericos o cosas como contain o cover para que ocupe todo el tamaño del botón), y como el valor de background-position es "center center", el icono siempre estará centrado en el botón.

Aquí dejo un ejemplo de cómo podría hacerse:

.a {
  background-image:url(http://lorempixel.com/18/18);
  background-repeat:no-repeat;
  background-position:center center;
  background-size:40px 40px;
  text-indent:-1000px;
  min-width:50px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<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">HOME</h4></a></li>
    </ul>
  </div>
</nav>

Nota como la imagen de fondo va en el a y no en el h4 para evitar problemas con los márgenes y también que sería recomendable indicar un ancho mínimo para asegurarse que la imagen completa entra dentro del botón. Además añadí un poco de texto "escondido" para que sea más accesible.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.