Nota: Si bien hemos traducido las guías más populares al español, algunas guías están disponibles solamente en inglés.
Añadir imágenes de fondo para todo el sitio

Las imágenes de fondo se muestran detrás del contenido de tu sitio y añaden un elemento visual para ayudar a marcar el estilo de tu sitio. Puedes añadir imágenes de fondo para todo el sitio en estasfamilias de plantillas:

  • Adirondack
  • Avenue
  • Aviator: LaPágina de Información también admite una imagen de fondo específica para cada 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. 

Consejo: Si tu plantilla no admite fondos para todo el sitio, aprende a crear fondos específicos para cada página.
La versión 7.1 no acepta imágenes de fondo para todo el sitio.

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.

Añadir la imagen

Para añadir un fondo para todo el sitio:

  1. En el Menú de Inicio, haz clic en Diseño y, luego, 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 y añade tu imagen.
  3. Ajusta el estilo de la imagen y, luego, haz clic en Guardar para publicar tus cambios.

En Adirondack, el ajuste luce así:

background-image-tweak.png

Añadir imágenes

Para usar una de tus propias imágenes, arrastra la imagen al cargador de imágenes. También puedes realizar lo siguiente:

Ajusta el estilo y recorta la imagen

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.
  • 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 Tamaño esté configurado como Automático o 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.

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 del 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 mostrarse un color de fondo o de superposición mientras se sube una imagen de fondo o de banner.

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

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 con este después de guardar los cambios desde una computadora de escritorio. Para una vista previa rápida mientras editas desde una computadora de escritorio, usa Vista en 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.
  • Consulta nuestros consejos de solución de problemas para los ajustes que funcionan bien en 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 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 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 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.
  • 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. (Esto también afectará la vista 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:

  • 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.

Aquí tenemos la plantilla Aviator con los fondos específicos para todo el sitio en comparación con el 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.

  • 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: 41 de 294
Añadir imágenes de fondo para todo el sitio