Pon un color o una foto tras el contenido.
Dale a una franja de tu página un color de marca o una foto, para que un encabezado destaque y la franja se lea como un bloque. Defines el color y la foto en el panel Style de cualquier elemento. Una Section añade un panel Background effects para una foto fija, parallax, un degradado o un vídeo de YouTube.
El vídeo sigue la receta de abajo: pone una foto tras un encabezado y un degradado oscuro sobre la foto, para que el encabezado blanco siga legible.
Antes de empezar
- Abre la página en DXPR Builder; señalar un elemento muestra su barra de controles con More. ¿No conoces el constructor? Consulta Crea tu primera página.
- Save en el diálogo conserva un cambio en el editor. Save en la barra de herramientas del constructor, sobre tu contenido, guarda la página y muestra "Saved field".
- Usa una Section para una franja completa de la página. Solo una Section tiene Background effects.
- Usa un elemento Text o Card para un recuadro de color tras unas líneas dentro de una columna.
- Usa tu tema para fondos en cada página, como el cuerpo de la página o el pie.
- Deja las palabras fuera de la foto. Una imagen de fondo no tiene texto alternativo, así que los lectores de pantalla la omiten. Pon tu mensaje en un encabezado encima.
Receta: un encabezado legible sobre una foto
El texto blanco sobre una foto con detalle cuesta de leer. Un degradado oscuro sobre la foto lo arregla, y sigue funcionando cuando cambias la foto. Necesitas una Section con tu encabezado en un elemento Text.
- Pasa el cursor sobre la Section, haz clic en More y luego en Settings.
- Abre el panel Style y haz clic en Select Image bajo Background image. Elige una foto. Aparece una miniatura, con una lista de tamaños de imagen.
- En la lista de tamaños, elige un tamaño al menos tan ancho como la pantalla más ancha para la que diseñas, u Original image (No resizing). Evita Optimize for fast loading para una franja completa.
- Pon Background style en Cover y Background position en Center center.
- Abre el panel Background effects y pon Background effect en Gradient. Tu foto permanece; el degradado queda sobre ella.
- En el campo de color de Start color, escribe
rgba(0, 0, 0, 0.6): negro al 60 %. Escribergba(0, 0, 0, 0.3)para End color. Deja Gradient direction en 180, para que el velo vaya de arriba abajo. - Haz clic en Save en el diálogo. La sección muestra la foto bajo un velo oscuro.
- Pasa el cursor sobre el elemento Text, haz clic en More y luego en Settings. En su panel Style, pon Font color en blanco y haz clic en Save.
- Haz clic en Save en la barra de herramientas.
Comprueba el encabezado contra la parte más clara de la foto. Apunta a un contraste de al menos 4,5 a 1, o 3 a 1 para encabezados grandes; la página Cambia el tamaño y el color del texto explica estos objetivos. ¿Aún cuesta leerlo? Sube ambos valores, por ejemplo a 0.8 y 0.5.
Lo que ves
La sección muestra tu foto bajo un velo oscuro, más oscuro arriba, con el encabezado blanco encima. Cover rellena toda la sección, así que en una pantalla estrecha se recorta más de los lados de la foto.
Cómo funcionan los ajustes
| Control | Qué hace |
|---|---|
| Background | Un color tras el contenido. El deslizador de opacidad del selector lo vuelve transparente. |
| Background image | Una imagen tras el contenido: desde Select Image, desde una URL o desde AI Image Generation, salvo que tu sitio lo desactivara. |
| Background style | Cómo la imagen rellena el elemento. Consulta la tabla siguiente. |
| Background position | El punto al que la imagen queda fijada. Con Cover, decide qué parte de la foto permanece visible. |
| Background style | Resultado |
|---|---|
| Theme defaults | Salvo que tu tema diga otra cosa, la imagen se repite a su propio tamaño desde la esquina superior izquierda. |
| Cover | La imagen rellena el elemento y los bordes que no caben se recortan. Lo mejor para fotos. |
| Contain | La imagen entera se muestra, una vez. Pueden quedar franjas vacías en dos lados. Lo mejor para logotipos. |
| No repeat | Una copia a su propio tamaño. |
| Repeat | La imagen se repite en mosaico por el elemento. Bueno para patrones. |
El color queda bajo la imagen. Se muestra por las partes claras de una imagen, en las franjas alrededor de una imagen Contain, y mientras la foto carga. Elige un color cercano al tono principal de la foto.
El tamaño Optimize for fast loading reduce una imagen a 1024 px de ancho como máximo y la guarda como WebP. Eso sirve para un recuadro, pero se ve suave en una franja completa en una pantalla grande.
La misma imagen carga en cada tamaño de pantalla, teléfonos incluidos. El panel Hover style tiene su propio Background y Background image, así que un recuadro puede cambiar de color o cambiar su imagen en hover.
Efectos de fondo de sección
Estos efectos necesitan una Section. Fixed image y Parallax image mueven la foto de Background image, así que define la foto primero.
| Background effect | Qué ven las visitas | Ajustes |
|---|---|---|
| Simple image | La foto se desplaza con la página. Es el valor predeterminado. | ninguno |
| Fixed image | La foto queda quieta mientras el contenido se desplaza sobre ella. | ninguno |
| Parallax image | La foto se desplaza más lento que el contenido. | Parallax speed (de 0 a 100; elegir Parallax image pone 20 cuando es 0), Parallax mode (Fixed o Local), Disable on mobile (pantallas de menos de 481 px de ancho) |
| Gradient | Una mezcla de dos colores, sola o sobre la foto. | Start color, End color, Gradient direction (de 1 a 360 grados; 180 va de arriba abajo), Start position, End position |
| YouTube video | Un vídeo silenciado se reproduce mientras la sección está en pantalla y se pausa cuando sale de ella. | YouTube video URL, Start time in seconds, Stop time in seconds, Video options |
Sobre una foto, el degradado siempre va de borde a borde. Start position y End position solo aplican a un degradado sin foto.
Si no ves el fondo
- La foto se muestra como una tira fina. Un fondo no añade altura; la sección es tan alta como su contenido y relleno. Añade contenido o activa 100% height en el panel General. Para más relleno, sigue una sección más alta.
- La foto se repite o muestra solo una esquina. Background style está en Theme defaults. Elige Cover.
- La foto se ve suave en una pantalla ancha. Optimize for fast loading la deja en 1024 px de ancho como máximo. Elige un tamaño más ancho en la lista de tamaños de imagen.
- La foto queda oculta tras un negro sólido. Los colores del degradado no tienen transparencia. Termina cada valor con un número menor que 1, como
rgba(0, 0, 0, 0.6). - El encabezado sigue oscuro. Una clase de color bajo las HTML classes del elemento Text, o una regla del tema con
!important, gana. Quita el chip, o consulta Cambia el tamaño y el color del texto. - El fondo desaparece tras recargar la página. Save en el diálogo conserva un cambio solo en el editor. Haz clic en Save en la barra de herramientas.
- El color no se muestra. La foto lo cubre. Para un tinte sobre la foto, usa Gradient en Background effects.
- Start position y End position no cambian nada. La sección tiene una Background image, así que el degradado va de borde a borde. Usa Gradient direction y colores transparentes.
- Un color de clase gana. Una clase como Primary background bajo HTML classes supera tu Background. Quita su chip.
- Background no hace nada en un Circle counter, Progress bar o Divider. Estos elementos usan sus propios colores. Define Background color, Back color o Color en el panel General.
¿Qué sigue?
- Cambia el tamaño y el color del texto: define el color del encabezado sobre tu foto y comprueba su contraste.