Para que una imagen de fondo ocupe el 100% de un div, debes usar las propiedades CSS background-size: cover, background-position: center y background-repeat: no-repeat, además de asegurar que tu div tenga un alto (height) definido.
Código CSS necesario
Aplica este código al selector de tu div:
css.mi-div {
/* 1. Define el tamaño y la altura del div */
width: 100%;
height: 400px; /* O usa 100vh si quieres que ocupe toda la pantalla */
/* 2. Propiedades para el fondo */
background-image: url('tu-imagen.jpg');
background-size: cover; /* Hace que la imagen cubra todo el espacio sin deformarse */
background-position: center; /* Centra la imagen en el div */
background-repeat: no-repeat; /* Evita que la imagen se repita como loseta */
}
Explicación de los puntos clave
background-size: cover: Estira la imagen de manera proporcional para que llene todo el contenedor por completo. Si la proporción no coincide, es posible que los bordes de la imagen se recorten un poco, pero nunca se deformará. Si prefieres que se estire de manera exacta (pudiendo deformarse), puedes usar background-size: 100% 100%.
div (height): Un div sin contenido está vacío y mide 0px de alto. Por más que pongas un fondo, no se verá a menos que le des un tamaño con height: 100%, una medida fija en píxeles (ej. 500px) o una relativa a la pantalla (ej. 100vh).
