Mi imagen de fondo no se ve
El síntoma: Una caja invisible
Configuras un background-image en tu CSS, pero en la web no aparece nada. Revisas la consola y la imagen carga perfectamente, no es un error 404.
El problema es que un div vacío tiene, por defecto, una altura de 0 píxeles. Al no tener contenido dentro, el contenedor no se estira y la imagen de fondo no tiene espacio donde mostrarse.
La solución: Darle cuerpo al contenedor
Para que una imagen de fondo sea visible, el contenedor debe tener dimensiones propias (width y height) o tener contenido (texto, otros divs) que lo obligue a expandirse.
Arréglalo ahora
En este ejercicio, el div.hero tiene una imagen de un bosque, pero no se ve porque la caja está "aplastada". Dale una altura para que aparezca.
<style>
.hero {
background-image: url('imgs/desierto.webp');
background-size: cover;
width: 100%;
/* ¡La caja no tiene altura! */
height: 0;
}
</style>
<div class="hero">
<!-- Esta caja está vacía, por eso no se ve -->
</div>
<p>Si la caja hero no tiene altura, el paisaje no existe.</p>