0

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.

3
  • 1
    ¿Has probado a darle un tamaño? El tag de imagen no tiene tamaño establecido, coge el de la imagen pero, en este caso, lo estás poniendo como fondo y no como src, por lo que puede no estar mostrándolo ya que su tamaño es cero.
    – Rabegi
    Commented el 7 dic. 2018 a las 10:39
  • Creo que te sobra un punto en la ruta. Prueba a poner esto img.logo-header{background: url("./img/centro.jpg");}
    – JDev
    Commented el 7 dic. 2018 a las 11:46
  • por la ruta que pusiste en el estilo css "../img/centro.jpg" con esto se asume que ese estilo esta en algún archivo dentro de la carpeta css, si no es así, no funcionará. Esa definición de estilo está en un archivo css dentro de la carpta css o dentro del index.html?
    – LPZadkiel
    Commented el 7 dic. 2018 a las 15:05

2 respuestas 2

2

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

1
  • 1
    creo que es importante resaltar el hecho de asignar valores al ancho y alto del elemento (height - width) ya que al usar la imagen como fondo, las dimensiones de la imagen no intervienen en las dimensiones del elemento que se este usando (en este caso img)
    – LPZadkiel
    Commented el 7 dic. 2018 a las 15:18
1

Si tu etiqueta <img class="logo-header" alt="tienda online"/> está en el archivo index.html, la ruta de tu imagen es: img/centro.jpg.

Ahora, si lo que quieres es colocar una imagen de fondo, puedes hacerlo directamente en un div de la siguiente manera (y esto es solo un ejemplo):

<!DOCTYPE html>
    <html>
        <head>
            <title></title>
            <style>
                .logo-header{
                    background: url(img/centro.jpg);
                    background-repeat: no-repeat;
                    background-position: center;
                    height: 300px;
                    width: 100%;
                }
            </style>
        </head>
        <body>
            <div class="logo-header">

            </div>
        </body>
    </html>

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.