Nota: Si bien hemos traducido las guías más populares al español, algunas guías están disponibles solamente en inglés.
Adding site-wide background images

Background images display behind your site content, adding a visual element to help set the tone for your site. You can add site-wide background images in these template families:

  • Adirondack
  • Avenue
  • Aviator - The Info Page also supports a page-specific background image.
  • Five
  • Forte
  • Momentum
  • Montauk
  • Native

All background images can be set to full-bleed, so they fill the page to the edges of the browser. 

Consejo: Si tu plantilla no admite fondos para todo el sitio, aprende a crear fondos específicos para cada página.

Mira el video

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:

  • Para imágenes de fondo sin bordes, te recomendamos cargar imágenes con un ancho de entre 1500 píxeles y 2500 píxeles. 
  • Los patrones abstractos y las imágenes sin texto ni bordes en general funcionan mejor, ya que ofrecen mayor flexibilidad para recortar, lo que siempre ocurrirá en cierta medida.
  • Los patrones repetitivos ofrecen la mayor flexibilidad cuando estás configurando cómo se verá la imagen.
  • Las imágenes de fondo no se transferirán si cambias de plantilla.

Forma de la imagen

Las imágenes de fondo sin bordes, a menudo se recortan de manera diferente en los dispositivos móviles que en los de escritorio, porque en general los dispositivos móviles se utilizan con orientación vertical.

Cuando elijas una imagen de fondo, ten en cuenta de qué manera los visitantes accederán a tu sitio:

  • Si prevés que la mayoría de tus visitantes visualizarán tu sitio desde dispositivos móviles, puedes minimizar el recorte con una imagen de fondo que sea más alta que ancha.
  • Si la mayoría de los visitantes utilizarán equipos de escritorio, usa una imagen con orientación horizontal o de forma similar a un cuadrado.
  • Para sitios de uso mixto, elige una imagen de fondo que se pueda recortar de varias maneras.

 

Add the image

To add a site-wide background:

  1. In the Home Menu, click Design, then click Site Styles.
  2. Look for a tweak named Background Image, Site Background Image, or Page Background Image. Click the tweak to open it, and add your image.
  3. Style the image, then click Save to publish your changes.

In Adirondack, the tweak looks like this:

background-image-tweak.png

Adding images

To use one of your own images, drag your image into the image uploader. You can also:

Style and crop the image

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

Size (Tamaño)
  • Auto (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.
  • Cover (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.
  • Contain (Contener): ajusta la imagen a escala para que el borde más largo (ancho o alto) quepa dentro del navegador.

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

Position (Posición)

Determina la posición de la imagen de fondo:

  • Superior izquierda, Superior centrada, Superior derecha
  • Centro a la izquierda, Centro en el centro, Centro a la derecha
  • Inferior izquierda, Inferior centrada, Inferior derecha
Repeat (Repetir)

Asegúrate de que Size (Tamaño) esté configurado como Auto (Automático) o Contain (Contener)

    • No-repeat (No repetir): muestra la imagen una vez
    • Repeat (Repetir): repite la imagen para que cubra todo el fondo.
    • Repeat-X (Repetir en X): repite la imagen solamente en el eje horizontal.
    • Repeat-Y (Repetir en Y): repite la imagen por el eje vertical solamente.

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

Fix Position (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.

Style other site areas

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 del contenido

Keep these tips in mind:

  • You may want to make background colors partially opaque so the background image shows through.
  • A background or overlay color may display while a background or banner image loads.

See how your site looks on mobile

Se mostrará la misma imagen de fondo en dispositivos de escritorio y móviles. Para ver el efecto, una buena opción es tener cerca tu teléfono y actualizar el sitio desde el teléfono después de guardar los cambios desde una computadora de escritorio. Para una vista previa rápida mientras editas desde un equipo de escritorio, usa Vista de Dispositivo.

Consejos:

  • 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.
  • See our troubleshooting tips for tweaks that work well on mobile.

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. Lo que resulta particularmente cierto en Páginas de Blog o en Páginas de Evento 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, 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 2 más arriba) e intenta alguna de estas opciones:

  • Selecciona Fix position (posición Fija) (Nota: no afectará algunos dispositivos móviles, incluído iOS)
  • Selecciona Size: Contain (Tamaño: Contener) o Size: Auto (Tamaño: automático)

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

La imagen luce borrosa o pixelada

Esto sucede cuando la imagen se estira 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 1500 y 2500 píxeles para la mayoría de los sitios.

Nota: no recomendamos cargar imágenes de fondo de más de 2500 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 2500 píxeles de ancho, los visitantes 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 Añadir HTML, CSS y JavaScript personalizados.

Visualización en dispositivos móviles

Así es como podrás usar los ajustes de estilo para arreglar problemas comunes de visualización en móviles. Dado que no existen ajustes por separado para equipos móviles y de escritorio, es una buena idea que experimentes con estas opciones para ver cuál te ofrece el 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.
  • Background image not displaying - Your main content background color may be covering the image. Adjust its transparency to reveal the background image. (This will also affect the desktop view.) Ensure your original image is less than 2500 pixels along its longest edge, as larger images may not display. In the Aviator family, ensure the Mobile Background Image tweak is checked.
  • 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:

  • Size: Cover (Tamaño: Cubrir)
  • Fixed position (Posición fija)
  • Canvas Background (Fondo del área de contenido principal) para que el color de fondo sea parcialmente opaco

Ejemplo de una imagen de fondo en la plantilla Montauk.

Aquí tienes un ejemplo con la plantilla Forte:

  • Size: Auto (Tamaño: Automático)
  • Repeat: Repeat (Repetir: Repetir)

Ejemplo de una imagen de fondo en la plantilla Forte.

Aquí tienes un ejemplo con la plantilla Native:

  • Position: Top Left (Posición: Superior izquierda)
  • Size: Auto (Tamaño: Automático), Repeat-Y (Repetir en Y)
  • Color del fondo del sitio: azul

Ejemplo de una imagen de fondo en la plantilla Native.

And here's the Aviator template, showing the site-wide and Info Page-specific backgrounds:

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.

  • Páginas de Portada: las Páginas de Portada están disponibles en todas las plantillas y son compatibles con texto, botones, encabezados, logos y formularios. Crean una página independiente con sus propias opciones de estilo y no muestran el encabezado, la navegación ni los pies de página del sitio. Esto las convierte en una excelente opción si quieres que una página se destaque.
  • 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 diferentes de contenido en tu banner.
  • 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.
¿Fue útil este artículo?
Usuarios a los que les pareció útil: 37 de 260
Adding site-wide background images