Title: adaptar fondo de cabecera a movil sin espacio en blanco
Last modified: 28 de diciembre de 2023

---

# adaptar fondo de cabecera a movil sin espacio en blanco

 *  Resuelto [anzuans](https://es.wordpress.org/support/users/anzuans/)
 * (@anzuans)
 * [hace 2 años, 9 meses](https://es.wordpress.org/support/topic/adaptar-fondo-de-cabecera-a-movil-sin-espacio-en-blanco/)
 * Hola a todos! He creado una web donde tiene una foto principal que ocupa toda
   la pantalla. Al visualizarla con el móvil se come gran parte de la foto y solo
   se centra en el centro de la misma.
 * He modificado esto con un css indicando que el el background-size sea contains.
 * Hasta aquí bien, pero al hacerlo aparece un bloque enorme en blanco que no se
   como deshacerme de él. He leído algo del padding pero tampoco me esta dando ben
   resultado, podéis ayudarme?
 * Gracias mil!
 * La página con la que necesito ayuda: _[[accede](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fes.wordpress.org%2Fsupport%2Ftopic%2Fadaptar-fondo-de-cabecera-a-movil-sin-espacio-en-blanco%2F%3Foutput_format%3Dmd&locale=es_ES)
   para ver el enlace]_

Viendo 2 respuestas - de la 1 a la 2 (de un total de 2)

 *  [Diego F.C.](https://es.wordpress.org/support/users/diegofc/)
 * (@diegofc)
 * [hace 2 años, 9 meses](https://es.wordpress.org/support/topic/adaptar-fondo-de-cabecera-a-movil-sin-espacio-en-blanco/#post-12220168)
 * Hola [@anzuans](https://es.wordpress.org/support/users/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](https://es.wordpress.org/support/users/anzuans/)
 * (@anzuans)
 * [hace 2 años, 9 meses](https://es.wordpress.org/support/topic/adaptar-fondo-de-cabecera-a-movil-sin-espacio-en-blanco/#post-12220174)
 * Hola [@diegofc](https://es.wordpress.org/support/users/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 🙂

Viendo 2 respuestas - de la 1 a la 2 (de un total de 2)

 El debate ‘adaptar fondo de cabecera a movil sin espacio en blanco’ está cerrado
a nuevas respuestas.

 * En: [Diseño – Temas y plantillas](https://es.wordpress.org/support/forum/temas-y-plantillas/)
 * 2 respuestas
 * 2 participantes
 * Última respuesta de: [anzuans](https://es.wordpress.org/support/users/anzuans/)
 * Última actividad: [hace 2 años, 9 meses](https://es.wordpress.org/support/topic/adaptar-fondo-de-cabecera-a-movil-sin-espacio-en-blanco/#post-12220174)
 * Estado: resuelto

## Debates

### Debates populares

### Debates sin respuestas

### Debates que no son soporte

### Debates resueltos

### Debates no resueltos

### Todos los debates