Agrega y personaliza imágenes de fondo para las secciones de página de tu sitio.

Hay varias maneras de diseñar el fondo de tu sitio. Una opción es agregar imágenes de fondo a las secciones de página y personalizar esas imágenes con una variedad de efectos de imagen. Esta es una excelente manera de crear banners de página y elementos visuales llamativos que coincidan con tu marca.

Esta guía revisa cómo agregar y personalizar fotos y otras imágenes de fondo que subes a Squarespace. Obtén información sobre todas tus opciones de estilo de fondo en Diseña el fondo de tu sitio.

Esta guía se refiere a la versión 7.1. Si tu sitio está en la versión 7.0, puedes agregar imágenes de banner y videos de fondo para obtener efectos similares, según la plantilla.

Mira el video

Antes de comenzar

• Los diseños inteligentes, las secciones de portafolio y todas las secciones de bloques admiten agregar imágenes de fondo. También puedes agregar videos de fondo y fondos personalizados a estas secciones.
• No es posible agregar imágenes de fondo a las secciones de galería, pero puedes agregar un color de fondo o usar el diseño Diapositivas: Completa para un efecto similar.
• Las secciones de blog, curso, eventos, tienda y video no admiten contenido de fondo, pero puedes agregar un color de fondo.
• Si tu sección incluye texto u otro contenido, asegúrate de que siga siendo visible y legible delante de los fondos personalizados. Para cambiar el color del texto, usa los ajustes de fuente en la combinación de colores de esa sección.
• Las imágenes de fondo se recortan automáticamente según la cantidad de contenido de la sección y el tamaño de la pantalla del navegador del visitante. Para elegir cómo se recorta una imagen, utiliza un bloque de imagen. Para averiguar cómo aparecen las imágenes de fondo en dispositivos móviles, visita ¿Cómo aparecerá mi sitio en dispositivos móviles?

Consejos de formato de imagen

Comprueba el formato de las imágenes antes de cargarlas en tu sitio. Para las imágenes de fondo, sigue estas pautas:

• Utiliza imágenes de entre 1,500 píxeles y 2,500 píxeles de ancho.
• No uses imágenes que contengan texto dentro del archivo. En su lugar, agrega texto sobre la imagen.
• Si vas a agregar texto sobre la imagen, usa una imagen con un patrón abstracto.
• Para ver los tipos de archivo de imagen y los requisitos de imagen completos, visita Cómo dar formato a imágenes para la web.

Agregar imágenes de fondo

Usa una imagen de fondo para agregar contraste con texto u otro contenido que superpone la sección o crea un banner cuando la sección esté en la parte superior de la página.

Para agregar una imagen de fondo de sección:

1. Abre el panel de Páginas y haz clic en la página que tenga la sección que quieres editar.
2. En la esquina superior izquierda, haz clic en Editar.
3. Desplaza el cursor sobre la sección y haz clic en el icono del lápiz, y luego haz clic en Fondo.
4. Haz clic en Imagen, luego en +. Elige una fuente de la imagen en el menú desplegable para subir una imagen, reutilizar una imagen previamente cargada, usar una imagen de stock o usar un fondo de stock.
5. (Opcional) Haz clic en Efecto de imagen para seleccionar un efecto de imagen.
6. (Opcional) Cambia el estilo de la imagen con el ancho de fondo y la opacidad de la superposición.
7. Haz clic en Formato para cambiar la altura de la sección, así como el ancho y la alineación del contenido.
8. (Opcional) Haz clic en Colores para seleccionar un tema para la superposición y cualquier contenido agregado. Para obtener más información, visita Cómo cambiar los colores. Si eliminas la imagen, la superposición pasa a ser el color de fondo de la sección.
9. Haz clic en Guardar para guardar tus cambios y seguir editando, o haz clic en Salir y luego Guardar para cerrar el editor.

Después de agregar una imagen, puedes:

• Agregar texto u otro contenido que superponga la imagen.
• Modifica el estilo de la imagen.
• Agregar efectos de imagen.
• Edita la imagen
• Selecciona el punto focal de la imagen
• Cambia la imagen haciendo clic en Reemplazar.
• Eliminar la imagen.

Agregar texto u otro contenido

Puedes agregar texto u otro contenido sobre una imagen de fondo. Debido a que el texto que agregas se ajusta para adaptarse a cualquier tamaño de pantalla o dispositivo móvil, esta es una excelente manera de agregar texto si estás usando la imagen de fondo como banner.

Consejo: Si quieres un mensaje con solo texto en la parte superior de tu sitio, agrega una barra de anuncios en lugar de un banner.

No recomendamos usar una imagen de fondo que tenga texto en el mismo archivo por los siguientes motivos:

• Las computadoras no pueden leer este texto, así que los motores de búsqueda no podrán indexarlas para que aparezcan en los resultados de búsqueda.
• Cuando la imagen cambie de forma para adaptarse a diferentes anchos del navegador, se recortarán partes del texto.

Para agregar texto u otro contenido:

1. Haz clic en Editar en la página con la imagen de fondo.
2. Haz clic en Agregar bloque o en un punto de inserción para agregar un bloque de texto. Haz clic en el bloque para agregar texto y luego usa el menú desplegable de Formato para elegir un estilo de párrafo.
3. Agrega más bloques de texto u otro contenido a la sección (como un bloque de botón).
4. Haz clic en Guardar para guardar tus cambios y seguir editando, o haz clic en Salir y luego Guardar para cerrar el editor.

Estilos de texto

La configuración de estilo de tu sitio en el panel Diseño establece cómo se muestra el texto en tu imagen de fondo.

• Para cambiar las fuentes del sitio, elige un paquete de fuentes y un tamaño base en el panel Fuentes. Desplázate hasta Asignar estilos para dar estilo al texto específico. Para obtener más información, visita Cómo cambiar fuentes.
• Para cambiar el color de tu fuente, elige una paleta y un tema en el panel Colores. Haz clic en el icono del lápiz en el tema de tu sección para dar estilo a elementos específicos dentro de ese tema. Para obtener más información, visita Cómo cambiar los colores.

Mira el video

Aplicar estilo a imágenes de fondo

Para aplicar estilo a la imagen de fondo, haz clic en Editar en la página, en el icono de lápiz en la sección de banner y, a continuación, en Fondo. Puedes seleccionar el ancho del fondo y la opacidad de la superposición.

Ancho del fondo

Para el ancho del fondo:

• La imagen sin bordes extiende la imagen de un borde de la ventana del navegador a otro, abarcando el ancho del sitio. Por lo general, esta es la configuración utilizada para las imágenes de banner.
• El recuadro aplica una ligera sangría a la imagen y crea un borde alrededor de ella.

Cuando la imagen se establece en Recuadro, puedes definir el color del borde.

Opacidad de la superposición

Opacidad de la superposición establece la opacidad de la superposición de color de tu imagen de fondo.

No hay una cantidad correcta de opacidad para usar, así que te recomendamos probar diferentes configuraciones para saber qué te funciona. En general, recomendamos un porcentaje más alto si la sección tiene mucho contenido, ya que eso puede ayudar a diferenciar el contenido de la imagen de fondo.

El color de la opacidad se establece mediante el ajuste Superposición del fondo en el tema de tu sección. Para obtener más información, visita Cómo cambiar los colores.

Nota: Si cargas un archivo.png con un fondo transparente, el navegador siempre mostrará un fondo blanco detrás de la imagen. Para cambiar este color de fondo, tendrás que editar la imagen en un software de edición de imágenes de terceros antes de subirla a tu sitio.

Cambiar el tamaño de las imágenes de fondo

Para cambiar la altura de una imagen de fondo:

1. Haz clic en Editar en la página y luego haz clic en el icono del lápiz en la sección de la imagen de fondo.
2. En la pestaña Formato, en Altura de sección, selecciona una altura preestablecida o haz clic en ... para establecer una altura personalizada. Si estás editando una sección de Editor dinámico, puedes cambiar la altura de la cuadrícula de la sección haciendo clic y arrastrando el icono de flecha azul en la esquina inferior derecha.
3. Haz clic en Guardar para guardar tus cambios y seguir editando, o haz clic en Salir y luego Guardar para cerrar el editor.

La altura de la sección afecta al modo en que se recorta la imagen de fondo tanto en computadoras de escritorio como en dispositivos móviles. Recomendamos probar diferentes alturas para obtener el aspecto que deseas.

En las secciones del editor clásico, la altura de la imagen de fondo también depende de la cantidad de contenido de la sección. Para aumentar la altura sin agregar contenido visible, agrega bloques de espacio.

Aunque las imágenes de fondo suelen abarcar el ancho del sitio, puedes aplicar estilo a la imagen de fondo para incluir un borde alrededor de ella. Hacerlo da la apariencia de reducir el ancho de la imagen.

Agregar efectos a imágenes de fondo

Después de agregar una imagen de fondo, puedes agregar efectos para estilizar su aspecto. Algunos efectos agregan una animación para que la imagen siempre se mueva, mientras que otros solo aparecen cuando quien visita el sitio se desplaza por esa sección del sitio.

Para añadir un efecto a una imagen:

1. Después de agregar una imagen de fondo en el editor de secciones, haz clic en Efecto de imagen en la pestaña Fondo.
2. Elige un efecto del menú. Para personalizar el efecto, haz clic en el icono de configuración para abrir el panel de detalles. Cualquier cambio que realices en el efecto aparecerá en la vista previa de tu sitio web. Para obtener más información sobre tus opciones, visita la sección a continuación.
3. Haz clic en Guardar para guardar tus cambios y seguir editando, o haz clic en Salir y luego Guardar para cerrar el editor.

Ten en cuenta lo siguiente:

• Los efectos de imagen solo aparecen en navegadores y dispositivos compatibles con WebGL, una herramienta que funciona con el procesador gráfico del dispositivo. Para comprobar si el navegador es compatible, visita get.webgl.org. Si el navegador no es compatible con WebGL, el fondo de la sección permanece estático.
• Los efectos de imagen no se aplican a fondos personalizados o videos de fondo, incluso si el video usa una imagen alternativa para dispositivos móviles.

Estilos de efectos de imagen

Puedes elegir entre estos efectos de imagen:

• Ninguno. Sin efecto, aparte del ajuste de opacidad de superposición.
• Líquido. Da a la imagen un efecto ondulante.
• Granularidad de película. Agrega una superposición estática animada a la imagen.
• Parallax. La imagen se mueve mientras los visitantes se desplazan.
• Círculos refractados. Refracta la imagen a través de un patrón de círculos.
• Líneas refractadas. Refracta la imagen a través de un patrón de líneas rectas.

Puedes personalizar tu efecto de imagen en el panel de detalles. Para abrir el panel de detalles, haz clic en un efecto de imagen y luego haz clic en el icono de configuración.

Desplázate por las opciones y la configuración hasta encontrar un patrón que te guste. Haz clic en cualquier categoría para expandir el menú desplegable y mostrar más opciones. Según el tipo de efecto de imagen, aparecerán distintas categorías.

Por ejemplo, puedes hacer lo siguiente:

• Edita el tamaño y la forma del efecto.
• Edita la velocidad y la dirección de los efectos con movimiento, como Líquido.

Otros ajustes son únicos para cada efecto de imagen e incluyen controles deslizantes y controles que cambian los elementos principales del efecto. Para experimentar con una configuración aleatoria de ajustes, haz clic en el icono Aleatorio al elegir un efecto o en Aleatorizar en el panel de detalles del efecto.

Recomendamos probar cada efecto para tener una mejor idea de cómo se ve y cómo funciona para tu sitio.

Aquí tienes un ejemplo de una imagen de fondo de sección con el efecto Líquido.

Quitar una imagen de fondo

Para quitar una imagen de fondo:

1. Haz clic en Editar en la página y, a continuación, en el ícono de lápiz en la sección del banner.
2. Haz clic en Fondo.
3. Haz clic en Eliminar.
4. Haz clic en Guardar para guardar tus cambios y seguir editando, o haz clic en Salir y luego Guardar para cerrar el editor.

Fondos de sección como banners

Una sección con una imagen de fondo en la parte superior de la página puede servir como punto focal visual para establecer el tono de tu contenido. Una imagen como esta se llama comúnmente banner.

Las imágenes de banner generalmente son independientes sin otro contenido en la sección o tienen un texto muy simple, como un título, superpuesto a ellas. También puedes crear banners con otros tipos de fondos, como videos o arte, para una estética diferente.

Aunque puedes usarlos de manera diferente, los banners funcionan igual que cualquier sección con una imagen de fondo, así que puedes seguir los pasos de esta guía para:

• Agregar una imagen de banner
• Agrega contenido superpuesto a la imagen de tu banner
• Cambia el estilo de la imagen de banner
• Cambiar el tamaño de la imagen de banner
• Eliminar una imagen de banner