Diseña y publica tus sitios rápidamente

Configura una imagen de fondo que abarque toda la página

Con esta publicación aprenderás a a configurar un fondo de página que abarque todo el ancho de tu pantalla (o la de tu visitante).

Cómo lograr que tu fondo “de el ancho”

En tu sitio, dirígete a la barra inferior y haz clic en “Styles”.

"Styles" en la barra inferior

Haz clic en "Styles" de la barra inferior

Se abrirá el bulk style editor. Selecciona la pestaña de “Page Containers” que está a la izquierda.

La pestaña de "Page Containers" en el bulk style editor

Haz clic en en la pestaña de "Page Containers"

Ahí verás las opciones para establecer un fondo para toda la página. Haz clic en “Edit” a la derecha de “Background Image”.

El botón de "Edit" en "Page Containers"

Haz clic en este botón para abrir las opciones para la imagen de fondo

Después se abrirá un panel nuevo con las siguientes opciones:

  • Posición horizontal. Ajusta la posición de tu imagen en el eje horizontal. Al mover la barra a la izquierda o derecha, tu imagen hará lo mismo.
  • Posición vertical. Lo mismo que con la horizontal, pero en el eje vertical (hacia arriba y abajo).
  • Opciones de medida/repetición. Aquí puedes elegir la manera en que se repetirá tu imagen. También esta la opción de “Fit to Area“, que es la que estamos buscando en este tutorial para que tu imagen de fondo abarque todo el ancho de tu página.
  • Botón de “Custom image”. Al hacer clic en él podrás agregar una imagen de tu computadora.

Esta imagen muestra dónde esta cada una de las opciones en el panel.

Opciones para la imagen de fondo

Esta imagen muestra las opciones para la imagen de fondo

Ahí puedes seleccionar una de las imágenes de tu biblioteca o agregar una propia. Para agregar una de tu computadora, haz clic en el botón de “+ Custom Image”. Una vez que selecciones una imagen, necesitarás cambiar la opción del menú desplegable de arriba a “Fit to Area”. Ve la imagen anterior para que sepas donde está.

Una vez que termines, es probable que quieras cambiar la opacidad de uno o varios bloques en tu layout (dependiendo del efecto que quieras lograr). Para ello tendrás que marcar las casillas de los bloques que quieras que sean transparentes debajo de “Force Transparency”.

Casillas de "Force transparency"

Cada uno de estos bloques es opaco y tiene su propio fondo, a menos que lo hagas transparente

¡Y eso es todo! Puedes experimentar con él.

Algo que debes de tomar en cuenta es que si cambias el tamaño de tu ventana, la imagen de fondo se adaptará a ella.

Preguntas frecuentes

¿Por qué no puedo ver el fondo?

Es posible que no puedas ver el fondo de la página por que uno o más bloques tienen un fondo propio. Para arreglar esto, selecciona “force transparency” en cada uno de los bloques que quieras hacer transparentes (usa como referencia la imagen anterior).

¿Puedo aplicar este cambio a los fondos de otros dots de estilo?

En la actualidad, la opción de “Fit to Area” solamente está disponible para fondos de toda la página y no la encontrarás en ninguna de las opciones de los otros dots de estilo.

¿Puedo usar una imagen propia?

¡Sí! Sube imágenes de tu computadora al hacer clic en el botón de “Custom Image” en el panel de “Background Image”.

¿Nos faltó explicar algo? Háznoslo saber en la sección de comentarios.