Una imagen de fondo rara vez llenará la ventana del navegador perfectamente a menos que coincida con la relación de aspecto exacta de la pantalla del visitante. Este es un comportamiento esperado: las ventanas del navegador vienen en innumerables tamaños y orientaciones, por lo que SeedProd te ofrece tres opciones de tamaño de fondo para controlar cómo se muestra la imagen. Comprender qué opción usar te ayudará a obtener el resultado que deseas.
Opciones de tamaño de fondo
Puedes cambiar el tamaño de tu imagen de fondo editando la configuración de fondo de la sección o página en el editor de SeedProd. Las tres opciones disponibles se comportan de la siguiente manera:
Cubrir (Predeterminado)
La imagen se escala hasta llenar completamente el área de fondo. Nunca se muestra espacio vacío, pero partes de la imagen pueden recortarse dependiendo del tamaño de pantalla y la relación de aspecto del visitante.
Esta es la configuración predeterminada y funciona bien para la mayoría de los fondos de héroe de ancho completo donde llenar el área es más importante que mostrar la imagen completa. Para controlar qué parte de la imagen permanece visible cuando se recorta, ajusta la configuración de Posición del fondo (punto focal); por ejemplo, configurarla en Centro Centro mantiene visible el centro de la imagen.
Ajustar
La imagen se escala para que quepa completamente dentro del área de fondo sin recortarse. La imagen completa siempre es visible, pero si la relación de aspecto de la imagen no coincide con el contenedor, aparecerá espacio vacío a su alrededor, rellenado por el color de fondo.
Usa Ajustar cuando sea importante que la imagen completa esté siempre visible; por ejemplo, un logotipo, un diagrama o una ilustración donde el recorte eliminaría contenido significativo. Establece un color de fondo que complemente la imagen para rellenar el espacio vacío.
Automático
La imagen se muestra en su tamaño original sin escalar. Si la imagen es más pequeña que el contenedor, se repetirá por defecto; si es más grande, se desbordará y se recortará. Esta opción te da el control más directo, pero requiere que la imagen tenga el tamaño exacto para el contenedor.
Elegir la configuración correcta
- El fondo llena el área sin huecos → usa Cubrir y ajusta la Posición del fondo para controlar qué parte de la imagen se centra.
- La imagen completa debe ser siempre visible → usa Ajustar y establece un color de fondo para rellenar el espacio circundante.
- La imagen tiene un tamaño fijo específico → usa Automático y ajusta el tamaño de tu imagen para que coincida exactamente con las dimensiones del contenedor.
Recomendaciones de tamaño de imagen
Para obtener los mejores resultados con la configuración de Cubrir, usa una imagen de fondo de al menos 1920 × 1080 píxeles y expórtala con un tamaño de archivo apropiado para la web (normalmente menos de 300 KB para imágenes JPEG). Una imagen ancha y orientada horizontalmente se escalará y recortará de forma más predecible en diferentes tamaños de pantalla que una imagen cuadrada o vertical.
Si tu imagen de fondo todavía no se ve bien después de ajustar estas configuraciones, intenta experimentar con la opción Posición de fondo para cambiar el punto focal, o usa una imagen de origen más ancha que ofrezca más flexibilidad cuando se recorta en pantallas más estrechas.