1

holii, me dan una mano? no se por que mi logo no se puede ver cuando abro el html, pero cuando la abro desde el go live de vs code si se ve

este es el css

.search-bar__logo-container{
background-image:url(/pry01/img/logo/technology.png);
height: 110px;
background-repeat: no-repeat;
background-size:cover;
background-position: center;
position: absolute;
top: 45px;
width:250px;
left: 210px;

}

este es el html

<div class="search-bar">
   <div class="search-bar__logo-container">
      Logo
   </div>

la imagen esta dentro del div porque es para una tarea y solo tenemos que añadir el css,sin modificar nada en el html

 <div class="search-bar">
        <div class="search-bar__logo-container">
            Logo
        </div>
        <form class="search-bar__form-container">
            <label class="search-bar__form-label" for="busqueda">Buscar</label>
            <input class="search-bar__form-search" id="busqueda" type="search">
            <input class="search-bar__form-submit" type="submit" value="Buscar">
        </form>
        <div class="search-bar__carrito-container">
            C
        </div>

el html mas extendido para no ponerlo todo

3
  • Lo abres en el navegador con XAMMP? Si es así, dale ctrl + F5 para que se actualice correctamente Commented el 1 oct. 2022 a las 2:16
  • Pusiste el html incompleto?, o te falto agregar el cierre del div de search-bar
    – JoseMgz_Ux
    Commented el 1 oct. 2022 a las 2:47
  • El div tiene el cierre si, el html no lo toque pprque nos dijeron para la tarea/proyecto que no lo tocaramos . Solo darle estilo con css . Pero si, lo veo y lo tiene el cierre
    – Ixel Diaz
    Commented el 1 oct. 2022 a las 2:58

1 respuesta 1

1

Esto siempre ocurre cuando no se hubica bien la ruta o la dirección del archivo (en este caso, la imágen).

En este caso el punto de partida es el archivo CSS y no HTML. Esto confunde y causa el problema.

Cuando se agrega una imágen al DOM desde CSS, la dirección debe comenzar así: ../; esto significa que retrocede, saliendo una vez para atrás (porque el punto de partida es el CSS, y por su puesto, la imágen no está en la carpeta de css).

Si la imágen está por ejemplo en la carpeta img, y el archivo de estilos está en la carpeta pry01, por su puesto, éstas carpetas están paralelos (eso espero). Entonces, la dirección sería:

../pry01/img/logo/technology.png

ó entre comillas

url("../pry01/img/logo/technology.png")
  • CSS

    estilo.css

  • IMG

    logo.png

  • index.html

Si ésto no te funciona, hay que saber la estructura de tus carpetas, y donde estan hubicados los archivos CSS y la imagen

Hay una extensión para Visual Studio Code que se llama: Image preview que te recomiendo para usar, que si la url qie se escribe en CSS ó HTML es corecto, entonces te muestra una previa de esa imágen.

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.