Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Solucionado (ver solución)
Solucionado
(ver solución)
9
respuestas

[Duda] imagen en el banner

Hola, escribo la ruta de la imagen como la docente, pero no me aparece la imagen en el banner, ya probé de todas las formas que indicaron los compañeros en otro spot con la misma duda. Si inserto la imagen en el HTML, se visualiza perfecto. Lo mismo me pasa con las 3 imagenes de las personas. Si alguien me pudiera ayudar. Muchas gracias

.banner__imagen{
    background: url('assets/img/banner.png') no-repeat center / cover;
    width: 100%;
    height: calc(100vh - 72px);

}
9 respuestas

Cordial saludo compañero, verifica muy bien la ruta url en donde se encuentra ubicada la imagen e intenta ubicar la carpeta img, ya que según como tengas organizadas las carpetas tienes que indicar muy bien la ruta, puedes utilizar url("../../img/banner.png"); espero te sirva de ayuda esta información, saludos!

lo que pasa es que ella esta usando live server y eso cambia el path en los archivos usa la el sig codigo te deberia funcionar

.banner__imagen {
    background: url(../../img/banner.png) no-repeat center /cover;
    width: 100%;
    height: calc(100vh - 72px); 

}

te explico la imagen de banner se encuentra en la direccion assert/img/banner.png

mientras el archivos css esta en assert/css/banner/banner-imagen.css es por ello que nunca lo bucaras por que con el path que muestra en el video assets/img/banner.png se direcciona a assert/css/banner/assets/img/banner cosa que no existe es por ello que se agrega

../

ya que al poner sube un direccion padre es decir a assert/css y si lo vuelves a aplicar te subira a la assert/ entonces desde ahi ya pudes dirigirte a la direccion img/banner/banner.png espero esta aplicacion te pueda ayudar

Hola, chicos. Ante todo, me llamo Claudia, por lo tanto soy COMPAÑERA de ustedes, no compañero. Considero que a las mujeres se las incluye a través del buen trato cotidiano, y no con publicidad por la tv.

Ya probé de todas las formas, con comillas, sin comillas, simples o dobles, ...es imposible errarle a la ruta porque cuando colocan la / inmediatamente se les presenta la ruta hasta llegar a las carpetas de img y css, a partir de ahí van siguiendo hasta llegar al archivo .jpg o .png de interés. A mi entender hay algo en la configuración del VSC. Por otra parte, me parece que no es muy relevante si la imagen está declarada en el HTML o CSS,

Muchas gracias. Saludos!

solución!

Hola Claudia, te pido disculpas por el malentendido, ya que tu perfil en el foro me aparece como alumno y no distingue si es alumno o alumna, frente a la duda, considero que si pudiste ver las 3 imágenes de las personas, el problema no tiene que ver con la configuración del VSC, te aconsejo primero revisar si importaste de manera correcta la ruta en el index.html de la carpeta banner, <link rel="stylesheet" href="./assets/css/banner/banner-imagen.css"> y dentro de la section clase banner en tu index.html, cambiar el link img por un div <section class="banner"><div class="banner__imagen"></div><h2 class="banner__titulo">Reaproveche mejor los alimentos</h2></section> segundo revisar en tu carpeta img si encuentra la imagen banner.png y tercero poder indicar en CSS la ruta relativa con background: url("../../img/banner.png") no-repeat center/cover; que es donde esta ubicada la carpeta img con la imagen banner, recuerda que tienes que indicar la ruta relativa con "../../" puedes utilizar comillas simples o dobles y eso no afectaría la búsqueda de la ruta, si tienes dudas sobre tipos de rutas, te dejo estos dos link que explica la diferencia entre diferentes rutas, absoluta y relativa, con ejemplos!

Rutas relativas

Rutas relativas y absolutas

Espero te sirva de ayuda esta información y discúlpame nuevamente por el malentendido. Saludos!

Hola! Probaría con verificar si el selector CSS para la imagen está bien. Me pasó, por ejemplo, que en un caso no me tomó las modificaciones porque tipeé mal el selector.

Hola! Probé escribiendo la ruta como lo indicaste, en el css:

background: url("../../img/banner.png") no-repeat center/cover;

y se resolvió. Muchas gracias por tu tiempo y ayuda. Saludos!

Hola Claudia, me llamo Oscar, me alegro mucho al saber que pudiste solucionar la duda que tenías, saludos!

Sólo así me apareció

Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad

Hola Daniel, la verdad que no entiendo a qué se debe pero en mi caso se me resolvió utilizando comillas dobles, todo lo demás igual. Gracias. Saludos!