Agregar imágenes de fondo en todo el sitio en la versión 7.0

Logra un impacto visual mostrando una imagen detrás del contenido de tu sitio.

Última actualización: 31 de diciembre de 2024

En algunos sitios de la versión 7.0, puedes agregar una imagen de fondo para mostrarla detrás del contenido del sitio, creando un elemento gráfico para ayudar a establecer el estilo de tu sitio.

Puedes añadir imágenes de fondo para todo el sitio en estas familias de plantillas:

  • Adirondack
  • Avenue
  • Aviator: la página de información también admite una imagen de fondo específica de la página.
  • Five
  • Forte
  • Momentum
  • Montauk
  • Native

Todas las imágenes de fondo se pueden configurar sin bordes para que ocupen la totalidad de la página hasta los extremos del navegador. Si tu plantilla no admite fondos para todo el sitio, aprende a crear fondos específicos para cada página.

Cómo acceder a esta función

La versión 7.1 no admite imágenes de fondo en todo el sitio, pero puedes agregar imágenes de fondo que se muestren detrás del contenido del sitio en la mayoría de las secciones de página.

Mejores prácticas

El tipo de imagen que eliges depende de tu estética personal y los objetivos de tu sitio, pero aquí tienes algunas pautas generales:

  • Recomendamos cargar imágenes con un ancho de 1500 píxeles a 2500 píxeles. Si se producen problemas, como que las imágenes de fondo no se carguen en dispositivos móviles, intenta reducir el borde más largo de todas las imágenes a 1500 píxeles. Esto aumentará la velocidad de carga y, al mismo tiempo, mantendrá la calidad de las imágenes.
  • Las imágenes de fondo sin bordes a menudo se recortan de manera diferente en dispositivos móviles que en equipos de escritorio. Es posible que desees elegir una imagen de fondo que se pueda recortar de varias maneras.
  • Los patrones abstractos, las imágenes sin texto o bordes y los patrones repetitivos generalmente funcionan mejor, ya que ofrecen más flexibilidad para el recorte, lo que siempre ocurrirá en cierta medida.
  • Las imágenes de fondo no se transferirán si cambias de plantilla.

Añadir la imagen

Para añadir un fondo para todo el sitio:

  1. Abre el panel Diseño y, a continuación, haz clic en Estilos del sitio.
  2. Busca un ajuste denominado Imagen de fondo, Imagen de fondo del sitio o Imagen de fondo de la página. Haz clic en el ajuste para abrirlo.
  3. Para agregar un archivo desde tu equipo, haz clic en el cargador o arrastra la imagen hasta el cargador. Haz clic en Buscar imagen para volver a utilizar una imagen o agregar una imagen de stock.
  4. Aplica estilo a la imagen y, a continuación, haz clic en Guardar para publicar los cambios.

En Adirondack, el ajuste luce así:

background-image-tweak.png

Ajusta el estilo y recorta la imagen

Después de añadir una imagen de fondo, usa las opciones debajo del cargador de imágenes para ajustar el estilo y arreglar cualquier recorte o distorsión que puedas notar.

Tamaño
  • Automático: la imagen conserva el ancho y la altura originales. Es una buena opción para imágenes más pequeñas que quieres repetir.
  • Cubrir: ajusta la escala de la imagen para que sea lo bastante grande para cubrir completamente el área de fondo (sin bordes). Como resultado, es posible que no se vea la imagen completa. La imagen puede lucir diferente en cada página según la altura del contenido de la página.
  • Contener: ajusta la imagen a escala para que el borde más largo (ancho o alto) quepa dentro del navegador.

Para las opciones Automático o Contener, es posible que se vea el color de fondo del sitio detrás de la imagen. Usa los ajustes Repetir para modificarlo.

Posición

Determina la posición de la imagen de fondo:

  • Superior a la izquierda, Superior al centro, Superior a la derecha
  • Centro a la izquierda, Centro al centro, Centro a la derecha
  • Inferior a la izquierda, Inferior al centro, Inferior a la derecha
Repetir

Asegúrate de que Tamaño esté configurado como Automático o Contener.

    • No repetir: muestra la imagen una vez
    • Repetir: repite la imagen para que cubra todo el fondo.
    • Repetir-X: repite la imagen solo en el eje horizontal X.
    • Repetir-Y: repite la imagen solo en el eje vertical Y.

Para las opciones No repetir, Repetir en X y Repetir en Y, usa las opciones de Posición para ajustar dónde se mostrará la imagen.

Posición fija

Cuando está marcada esta opción, la posición de la imagen se mantiene estática detrás del contenido que se desplaza. Cuando no está marcada, se desplaza hacia arriba y abajo con la página.

En muchos navegadores móviles, incluso en iOS, esta función no tiene ningún efecto, y la imagen se desplazará con la página.

Ajusta el estilo de otras áreas del sitio

Cuánto se ve de tu imagen de fondo depende de la configuración de los demás elementos del sitio. Las opciones de estilo y los nombres de retoques varían de una plantilla a otra, pero puedes usar los Estilos del sitio para experimentar con algunas o todas las siguientes áreas de tu sitio:

  • Fondo del área de contenido principal (o "canvas")
  • Fondo del encabezado
  • Fondo del pie de página
  • Ancho del sitio y ancho de contenido

Ten en cuenta lo siguiente:

  • Tal vez quieras hacer que los colores de fondo sean parcialmente opacos para que la imagen de fondo se trasluzca.
  • Puede aparecer un color de fondo o superposición mientras se carga una imagen de fondo.

Controla cómo se ve tu sitio en dispositivos móviles

La misma imagen de fondo se muestra en computadoras de escritorio y en dispositivos móviles. Para ver el efecto, una buena opción es tener cerca tu teléfono y actualizar el sitio en él después de guardar los cambios desde una computadora de escritorio. Para obtener una vista previa rápida mientras editas en una computadora de escritorio, usa la vista en dispositivo.

A medida que la imagen se ajusta a la pantalla del navegador más larga y estrecha de un dispositivo móvil, puede tener recortes o distorsiones. Puedes hacer lo siguiente para reducir esto:

  • Cuando elijas una imagen de fondo, la forma de la imagen puede hacer una gran diferencia en la forma en que se ve desde dispositivos móviles.
  • Consulta nuestros consejos de solución de problemas para los ajustes del Editor de Estilo que funcionan bien en los dispositivos móviles.

Resolución de problemas

La imagen de fondo se distorsiona en algunas páginas o en dispositivos móviles

Esto sucede cuando la imagen de fondo se amplía para cubrir el largo de la ventana del navegador. Esto es particularmente así en las Páginas de Blog o en Páginas de Eventos configuradas con la vista de Lista, ya que, en general, son más largas que otras páginas, así como en dispositivos móviles, porque el contenido de la página se apila en forma vertical. Cuanto más alto sea el contenido de la página, más se ampliará el fondo para cubrirlo por completo y más aumentado lucirá.

Para arreglarlo, abre el ajuste de imagen de fondo (ve el paso 3 más arriba) e intenta alguna de estas opciones:

  • Selecciona Posición fija (esto no afectará a algunos dispositivos móviles, incluido iOS)
  • Selecciona Tamaño: Contener o Tamaño: Automático.

Tal vez también quieras experimentar con las opciones de Posición para ver qué versión se adapta mejor a páginas largas y a la visualización en dispositivos móviles.

Mi imagen está borrosa o pixelada

Esto sucede cuando la imagen se amplía más que la dimensión original para cubrir el área del fondo.

Para imágenes sin bordes, te recomendamos cargar imágenes con un ancho de entre 1,500 y 2,500 píxeles para la mayoría de los sitios.

Nota

no recomendamos cargar imágenes de fondo de más de 2,500 píxeles en el borde más largo. Las imágenes de fondo para todo el sitio se cargan en el tamaño de imagen original. Si tu imagen de fondo tiene más de 2,500 píxeles de ancho, quienes visitan el sitio podrían tener problemas.

Imágenes de fondo y código personalizado

El código personalizado que hayas añadido al sitio podría interferir con la forma en que se ve tu imagen de fondo. Si estás resolviendo problemas con tu imagen de fondo, deshabilita momentáneamente cualquier código personalizado para ver si el problema tiene alguna relación con el código. Para obtener más información, visita Cómo agregar código personalizado a tu sitio.

Visualización en dispositivos móviles

A continuación, te explicamos cómo puedes usar ajustes de estilo para solucionar problemas habituales de visualización en un dispositivo móvil. Dado que no hay ajustes separados para dispositivo móvil y equipo, es recomendable experimentar con estas opciones para ver cuáles tienen mejor aspecto.

  • Imagen aumentada o distorsionada: Establece la imagen con un Tamaño: Contener o Tamaño: Automático. También puedes tener que subir una imagen más grande, de hasta 2500 píxeles en su borde más largo.
  • El tamaño de la imagen de fondo cambia en páginas diferentes: Establece tu imagen con un Tamaño: Contener o Tamaño: Automático.
  • La imagen no está bien centrada: Usa las opciones de Posición para ajustar dónde se mostrará tu imagen dentro de la página.
  • No se muestra la imagen de fondo: el color de fondo de tu contenido principal puede estar cubriendo la imagen. Ajusta la transparencia para revelar la imagen de fondo. (También afectará la vista en computadoras de escritorio). Asegúrate de que la imagen tenga menos de 2500 píxeles en el borde más largo, ya que las imágenes más grandes no se mostrarán. En la familia Aviator, verifica que el ajuste Imagen de fondo en dispositivos móviles esté marcado.
  • La imagen no cubre todo el contenedor: Selecciona Tamaño: Automático o Tamaño: Contener y Repetir la imagen para cubrir cualquier área en blanco.

Ejemplos

Experimenta con las opciones del ajuste de imagen de fondo para encontrar la colocación perfecta para la imagen de fondo. Incluimos algunos ejemplos abajo para que te sirvan de inspiración.

Aquí tienes un ejemplo en la plantilla Montauk:

  • Tamaño: Cubrir
  • Posición fija
  • Fondo del lienzo para que el color de fondo sea parcialmente opaco
Ejemplo de una imagen de fondo en la plantilla Montauk.

Este es un ejemplo en la plantilla Forte:

  • Tamaño: Automático
  • Repetir: Repetir
Ejemplo de una imagen de fondo en la plantilla Forte.

Este es un ejemplo en la plantilla Native:

  • Posición: Superior izquierda
  • Tamaño: Automático, Repetir en Y
  • Color del fondo del sitio: azul
Ejemplo de una imagen de fondo en la plantilla Native.

Aquí tenemos la plantilla Aviator con los fondos específicos para todo el sitio en comparación con el específico de la Página de Información:

Fondos específicos para todo el sitio y para la Página Intro en la plantilla Aviator.

Añade imágenes de fondo específicas para cada página

También hay varias maneras de crear una imagen de fondo en solo una página.

  • Banners: algunas plantillas admiten imágenes de banner, que se muestran en la parte superior de la página y pueden ser compatibles con la superposición de contenido. En la familia Brine, por ejemplo, puedes usar bloques en un área de introducción para agregar varios tipos distintos de contenido en tu banner.
  • Páginas de portada: están disponibles en todas las plantillas de la versión 7.0 y admiten texto, botones, títulos, logotipos y formularios. Crean una página independiente con sus propias opciones de estilo y no muestran el encabezado del sitio, la navegación o los pies de página. Esto las convierte en una gran opción si quieres que una página destaque.
  • Sección de Página de Índice: en las familias de plantillas Brine y Pacific, puedes usar un Índice para agregar una imagen de fondo detrás de una sección de una Página de Diseño.
Footer Image
  • Recibe ayuda de nuestra comunidad

  • Recibe la ayuda de nuestra comunidad para personalizaciones avanzadas.

  • Contrata a un Squarespace Expert

  • Destácate en línea con la ayuda de un diseñador o desarrollador con experiencia.

Agregar imágenes de fondo en todo el sitio en la versión 7.0