--- url: 'https://dxpr.com/es/hc/documentacion/aprender-dxpr-builder/ajustes-elemento/fondo' title: 'Pon un color o una foto tras el contenido | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T00:11:36+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- 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. tags: - 'Style your elements' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T17:19:22+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Pon un color o una foto tras el contenido' description: |- 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. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T00:11:36+0000' dateModified: '2026-10-24T17:19:22+0000' author: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' mainEntityOfPage: 'https://dxpr.com/es/hc/documentacion/aprender-dxpr-builder/ajustes-elemento/fondo' articleSection: 'Da estilo a tus elementos' - '@type': WebPage '@id': 'https://dxpr.com/es/hc/documentacion/aprender-dxpr-builder/ajustes-elemento/fondo' description: |- 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. breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Inicio item: 'https://dxpr.com/es' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: es --- [Centro de ayuda](/es/hc)/[Documentación](/es/hc/documentacion) /[Aprende DXPR Builder](/es/hc/documentation/learn-dxpr-builder) /[Crear páginas](/es/hc/documentation/learn-dxpr-builder/build) /[Da estilo a tus elementos](/es/hc/documentation/learn-dxpr-builder/element-settings) # Pon un color o una foto tras el contenido. Aprende DXPR BuilderCrear páginasDa estilo a tus elementos ## En esta guía Guías relacionadas - [Cambia el tamaño y el color del texto](/es/hc/documentacion/aprender-dxpr-builder/ajustes-elemento/tipografia) 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](/es/hc/documentacion/aprender-dxpr-builder/primeros-pasos/primera-pagina). - **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. 1. Pasa el cursor sobre la **Section**, haz clic en **More** y luego en **Settings**. 2. 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. 3. 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. 4. Pon **Background style** en **Cover** y **Background position** en **Center center**. 5. Abre el panel **Background effects** y pon **Background effect** en **Gradient**. Tu foto permanece; el degradado queda sobre ella. 6. En el campo de color de **Start color**, escribe `rgba(0, 0, 0, 0.6)`: negro al 60 %. Escribe `rgba(0, 0, 0, 0.3)` para **End color**. Deja **Gradient direction** en 180, para que el velo vaya de arriba abajo. 7. Haz clic en **Save** en el diálogo. La sección muestra la foto bajo un velo oscuro. 8. 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**. 9. 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](/es/hc/documentacion/aprender-dxpr-builder/ajustes-elemento/tipografia) 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](/es/hc/documentacion/aprender-dxpr-builder/ajustes-elemento/espaciado#recipe-a-taller-section). - **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](/es/hc/documentacion/aprender-dxpr-builder/ajustes-elemento/tipografia). - **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](/es/hc/documentacion/aprender-dxpr-builder/ajustes-elemento/tipografia): define el color del encabezado sobre tu foto y comprueba su contraste.