--- url: 'https://dxpr.com/es/hc/documentation/learn-dxpr-builder/design/backgrounds' title: 'Dale a una sección un fondo de color, foto o degradado | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T11:17:35+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- Puedes rellenar cualquier sección con un color, una foto o un degradado. El color y la foto vienen del panel Style, que tienen las secciones, filas, columnas y elementos. Las secciones añaden un panel Background effects para degradados, fotos fijas y de paralaje, y vídeo de YouTube. El ejemplo crea una sección azul marino con una foto de ciudad, texto blanco y un degradado encima. El vídeo añade una foto tras una sección, y luego la cubre con un degradado. tags: - Ontwerpgidsen image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T11:17:35+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Dale a una sección un fondo de color, foto o degradado' description: |- Puedes rellenar cualquier sección con un color, una foto o un degradado. El color y la foto vienen del panel Style, que tienen las secciones, filas, columnas y elementos. Las secciones añaden un panel Background effects para degradados, fotos fijas y de paralaje, y vídeo de YouTube. El ejemplo crea una sección azul marino con una foto de ciudad, texto blanco y un degradado encima. El vídeo añade una foto tras una sección, y luego la cubre con un degradado. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T11:17:35+0000' dateModified: '2026-10-24T11:17:35+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/documentation/learn-dxpr-builder/design/backgrounds' articleSection: Ontwerpgidsen - '@type': WebPage '@id': 'https://dxpr.com/es/hc/documentation/learn-dxpr-builder/design/backgrounds' description: |- Puedes rellenar cualquier sección con un color, una foto o un degradado. El color y la foto vienen del panel Style, que tienen las secciones, filas, columnas y elementos. Las secciones añaden un panel Background effects para degradados, fotos fijas y de paralaje, y vídeo de YouTube. El ejemplo crea una sección azul marino con una foto de ciudad, texto blanco y un degradado encima. El vídeo añade una foto tras una sección, y luego la cubre con un degradado. 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 --- [Help Center](/es/hc)/[Documentation](/es/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Build pages](/hc/documentation/learn-dxpr-builder/build) /[Elementen stylen](/hc/documentation/learn-dxpr-builder/element-settings) /[Ontwerpgidsen](/hc/documentation/learn-dxpr-builder/design/overview) # Dale a una sección un fondo de color, foto o degradado. Learn DXPR BuilderBuild pagesElementen stylenOntwerpgidsen ## In this guide Related guides - [Ejecuta una sección de borde a borde](/es/hc/documentation/learn-dxpr-builder/design/full-width-layouts) - [Anima elementos al desplazar, en hover o al hacer clic](/es/hc/documentation/learn-dxpr-builder/design/animation-tab) - [Diseña una sección hero](/es/hc/documentation/learn-dxpr-builder/tutorials/hero-section) Puedes rellenar cualquier sección con un color, una foto o un degradado. El color y la foto vienen del panel **Style**, que tienen las secciones, filas, columnas y elementos. Las secciones añaden un panel **Background effects** para degradados, fotos fijas y de paralaje, y vídeo de YouTube. El ejemplo crea una sección azul marino con una foto de ciudad, texto blanco y un degradado encima. El vídeo añade una foto tras una sección, y luego la cubre con un degradado. ## Añade un color y una foto 1. Haz clic en **Add Elements** en el área de contenido vacía y escoge **Section** en la pestaña **Layout**. 2. Pasa sobre la sección y abre **More > Settings**. 3. Abre el panel **Style**. 4. Escoge un tono azul marino oscuro para **Background**. 5. Escoge blanco para **Font color**. 6. En **Background image**, haz clic en **Select Image**. Busca en la biblioteca de medios, marca una foto y haz clic en **Insert selected**. 7. Fija **Background style** en **Cover**. 8. Fija **Background position** en **Center center** y haz clic en **Save**. 9. Haz clic en **+** en la sección y escoge **Text** en la pestaña **Content**. 10. Escribe un encabezado, como `Evening lectures`, y una línea debajo. Fija el encabezado en **Heading 2** y centra ambas líneas en la barra del editor. 11. Abre el panel **Style**, fija **Font color** en blanco y haz clic en **Save**. ## Añade un degradado 1. Pasa sobre la sección y abre **More > Settings** de nuevo. 2. Abre el panel **Background effects** y fija **Background effect** en **Gradient**. 3. Escoge un **Start color** y un **End color**, y haz clic en **Save**. 4. Haz clic en **Save** en la barra, abre el menú de vista (el icono de ojo) y elige **Preview**. ## Lo que ves Tras los primeros pasos, la foto llena toda la sección tras el encabezado blanco. **Cover** recorta lo que no encaja, y **Center center** mantiene el centro de la foto a la vista. El color azul marino solo se muestra mientras la foto carga o donde la foto no llega. El degradado funde del color inicial arriba al color final abajo. Está sobre la foto. Los colores opacos cubren la foto por completo; los colores con algo de transparencia la dejan ver. ## Ajustes ### Panel Style (cada sección, fila, columna y elemento) | Ajuste | Qué hace | Predeterminado | |---|---|---| | **Background** | Un color de relleno del selector de color o una muestra del tema | Ninguno | | **Background image** | Una imagen de la biblioteca de medios, escogida con **Select Image** | Ninguno | | **Background style** | **Cover** rellena el elemento y recorta; **Contain** muestra la imagen entera y puede dejar huecos; **No repeat** la muestra una vez a su tamaño; **Repeat** la repite en mosaico | **Theme defaults** | | **Background position** | Qué parte de la imagen queda a la vista cuando se recorta, como **Center center** o **Left top** | **Theme defaults** | Cuando la generación de imágenes con IA está configurada, **Background image** también acepta un prompt. Consulta [Generación de imágenes con IA](/hc/documentation/learn-dxpr-builder/ai/image-generation). ### Panel Background effects (solo secciones) | Efecto de fondo | Qué hace | Ajustes extra | |---|---|---| | **Simple image** (predeterminado) | La foto se desplaza con la página | Ninguno | | **Fixed image** | La foto queda fija mientras la página se desplaza sobre ella | Ninguno | | **Parallax image** | La foto se mueve más lenta que la página. Consulta [Sección hero](/hc/documentation/learn-dxpr-builder/tutorials/hero-section) para ver un ejemplo. | **Parallax speed**, **Parallax mode** (**Fixed** o **Local**), **Disable on mobile** | | **Gradient** | Dos colores se funden en la sección, sobre la foto si hay una | **Start color**, **End color**, **Gradient direction** (180 grados va de arriba abajo), **Start position**, **End position** | | **YouTube video** | Un vídeo de YouTube silenciado llena la sección; marca **Loop** para repetirlo | **YouTube video URL**, **Video options**, **Start time in seconds**, **Stop time in seconds** | Los efectos fijos y de paralaje mueven la foto que fijaste en el panel **Style**. Un vídeo de YouTube no necesita foto. ## Si no ves el fondo - **No hay ningún panel Background effects.** Solo las secciones lo tienen. Pasa sobre la sección, no sobre una fila, columna o elemento, y abre **More > Settings**. - **The photo is cut off.** **Cover** recorta lo que no encaja en la sección. Cambia **Background position** para mantener el motivo a la vista, o elige **Contain**. - **The gradient hides the photo.** El degradado está encima, y los colores opacos cubren la foto. Baja la opacidad de **Start color** y **End color** en el selector de color. - **The section shows no gradient.** Un degradado necesita ambos colores. Escoge un **Start color** y un **End color**. - **El vídeo de YouTube no se reproduce.** **YouTube video URL** está vacío o no es un enlace a un vídeo. Pega la dirección completa del vídeo, como `https://www.youtube.com/watch?v=` seguida de su ID. ## ¿Qué sigue? - [Diseños de ancho completo](/hc/documentation/learn-dxpr-builder/design/full-width-layouts): deja que el fondo y el contenido vayan de borde a borde. - [Pestaña de animación](/hc/documentation/learn-dxpr-builder/design/animation-tab): funde el texto cuando la sección entra en vista. - [Sección hero](/hc/documentation/learn-dxpr-builder/tutorials/hero-section): crea una cabecera de página completa con foto de paralaje.