Imagen desde CSS

publicado por: Anonymous

Quiero cargar una imagen a una etiqueta img desde un archivo css

El siguiente código es de mi HTML

<img class="logo-header" alt="tienda online"/>

y a continuación el CSS

img.logo-header{background: url("../img/centro.jpg");}

mis carpetas de archivos están estructuradas de esta manera

introducir la descripción de la imagen aquí

No logro que se carge la imagen, desconozco si estoy haciendo algo mal o
debo subir la pagina a un hostinger y colocar la imagen de esta manera

img.logo-header{background: url("https://www.test.com/img/centro.jpg");}

Existen mas reglas en mi archivo CSS, esta descartado que no este conectado correctamente a la hoja de estilos.

solución

En el html te recomiendo reemplazar:

<img class="logo-header" alt="tienda online"/>

Por

<div class="logo-header"></div>

En el style reemplazar:

img.logo-header{background: url("../img/centro.jpg");}

Por

.logo-header {
    background-image: url("../img/centro.jpg");
    width: 200px; /* Definir de acuerdo al ancho de la imagen */
    height: 200px; /* Definir de acuerdo al alto de la imagen */
}

Otra opción es trabajar con el atributo content

img.logo-header{
    content: url("../img/centro.jpg");
}

Hice la prueba y funciona correctamente en los siguiente navegadores:

  • Google Chrome: Version 71.0.3578.80
  • Safari: Version 12.0

Excepto:

  • FireFox: 63.0.3

PD: Me faltó probar en Opera y IE

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *