Estoy intentando realizar un cambio que me han solicitado en uno de los videos del modulo "Arquitectura CSS: Descomplicando los problemas" que es mover las imagenes significativas del HTML al CSS pero resulta que estoy intentando mover la del Banner de las frutas pero no se me da, adjunto imagen de como se observa la web en blanco, la ruta en donde esta ubicada la imagen, como lo tengo en HTML y en CSS, quedaré atento, Mil gracias.
Creo que si tu archivo de estilos.css esta en la carpeta " arquitectura-css-base-main", para referencia la ruta desde el css hasta la imagen debería escribirse así --> 'assets/img/banner.png'
Hola Nicolas, gracias por tu respuesta , pero aún asi yo ponga esa ruta no funciona , sigue igual, se ve en blanco y lo otro es que cuando quiere hacer el direccionamiento a la carpeta "assets" solo me aparece "arquitectura-css-base-main" adjunto imagen:
Nadie me ha podido dar una respuesta a este caso :(
Estas llamando mal a la ruta, si tienes tus estilos css en la carpeta raiz de tu proyecto debes llamarlo de la siguiente forma definiendo el punto al inicio de la ruta
.banner__imagen{
background: url('./assets/img/banner.jpg');
}
de lo contrario si tienes tus estilos en una carpeta especifica para css debes navegar entre carpetas con los puntos por ejemplo para volver una carpeta atrás y entrar a los assets seria con dos puntos al inicio
.banner__imagen{
background: url('../assets/img/banner.jpg');
}
he intentado con tus dos sugerencias y ninguna de las dos me funciona y pues yo tengo la imagen en PNG, ya no se que más hacerle. Lo extraño es que solo me sucede con esa imágen.
Mmm que raro que no te traiga la imagen, lo que podrías hacer también seria traer la imagen con HTML creando 2 contenedores uno para el fondo que quieres colocar y otro para el contenido que quieres mostrar encima del fondo, este es el ejemplo de la estructura:
<div class="fondo-pantalla">
<img src="./assets/img/banner.png">
<div class="contenido">
<h1>Hola mundo</h1>
</div>
</div>
y ya con css defines los estilos de esta manera:
.fondo-pantalla{
width: 100%;
height: 100vh;
position: relative;
}
.fondo-pantalla img{
width: 100%;
height: 100%;
object-fit: cover;
}
.contenido{
width: 100%;
height: 100%;
position: absolute;
top: 0; left: 0;
z-index: 1;
background: rgba(0,0,0,.40);
}
Aunque otro posible error que se me ocurre, por el que no te estén funcionando los estilos es porque quizá no estas llamando correctamente el archivo CSS desde el head de HTML