Hola @anzuans!
Se trata, precisamente, de cómo funciona la propiedad CSS que estás usando 😊. Al usar la imagen de fondo puedes fijar el tamaño, ponerlo en modo «cover» (siempre ocupará el alto y ancho del elemento HTML que lo contiene), y en modo «contain» (siempre entrará el 100% de la foto, independientemente del ancho/alto del elemento HTML que lo contiene).
Si lo que quieres es hacer una cabecera que siempre entre la imagen y que no quede en blanco partes tienes dos enfoques:
- Usar una imagen: Aquí no tienes problema, simplemente tendrás una imagen de un ancho/alto que tu decidas.
- Usar un contenedor: Es lo que estás haciendo, pero deberás usar el elemento «cover» para que tu imagen siempre cubra este elemento y trabajar con las media-query para que el alto de tu contenedor se adapte en función de lo que no quieres «perder» de la imagen.
- Usar JavaScript: Existe múltiples plugins e incluso librerías para adaptar el tamaño de una imagen y un contenedor. Aquí, por lo que intuyo de tu diseño, lo que no quieres es que se os corte a ti o a tu pareja, existen librerías para centrar el punto sobre el que se va a trabajar (en este caso quizá la cara de ambos) y luego en función del tamaño del contenedor, vuestras caras queden siempre en el centro o en un punto concreto. Esto ya me parece hacer un poco de sobre-ingeniería, pero es una posibilidad.
Espero haber aclarado un poquito los conceptos. Cualquier duda aquí estamos y… ¡enhorabuena por el enlace!
Iniciador del debate
anzuans
(@anzuans)
Hola @diegofc,
Muchas gracias por tu respuesta, la verdad que me has ayudado mucho en lo que necesitaba hacer. No había caído en modificar el contenedor. Finalmente lo arregle dejando el fondo como cover y ajustando la altura del contenedor, ahora tanto versión escritorio como versión móvil se visualiza como quiero.
Muchas gracias por tu ayuda y por la felicitación 🙂
