--- url: 'https://dxpr.com/fr/hc/documentation/learn-dxpr-builder/design/backgrounds' title: 'Donner à une section un arrière-plan couleur, photo ou dégradé | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T11:00:00+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- Vous pouvez remplir toute section d’une couleur, d’une photo ou d’un dégradé. Couleur et photo viennent du panneau Style, que sections, lignes, colonnes et éléments ont tous. Les sections ajoutent un panneau Background effects pour les dégradés, les photos fixes et parallaxe et les vidéos YouTube. L’exemple construit une section bleu marine avec une photo de ville, du texte blanc et un dégradé par-dessus. La vidéo ajoute une photo derrière une section, puis la couvre d’un dégradé. 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:00:00+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Donner à une section un arrière-plan couleur, photo ou dégradé' description: |- Vous pouvez remplir toute section d’une couleur, d’une photo ou d’un dégradé. Couleur et photo viennent du panneau Style, que sections, lignes, colonnes et éléments ont tous. Les sections ajoutent un panneau Background effects pour les dégradés, les photos fixes et parallaxe et les vidéos YouTube. L’exemple construit une section bleu marine avec une photo de ville, du texte blanc et un dégradé par-dessus. La vidéo ajoute une photo derrière une section, puis la couvre d’un dégradé. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T11:00:00+0000' dateModified: '2026-10-24T11:00:00+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/fr/hc/documentation/learn-dxpr-builder/design/backgrounds' articleSection: Ontwerpgidsen - '@type': WebPage '@id': 'https://dxpr.com/fr/hc/documentation/learn-dxpr-builder/design/backgrounds' description: |- Vous pouvez remplir toute section d’une couleur, d’une photo ou d’un dégradé. Couleur et photo viennent du panneau Style, que sections, lignes, colonnes et éléments ont tous. Les sections ajoutent un panneau Background effects pour les dégradés, les photos fixes et parallaxe et les vidéos YouTube. L’exemple construit une section bleu marine avec une photo de ville, du texte blanc et un dégradé par-dessus. La vidéo ajoute une photo derrière une section, puis la couvre d’un dégradé. breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Accueil item: 'https://dxpr.com/fr' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: fr --- [Help Center](/fr/hc)/[Documentation](/fr/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) # Donner à une section un arrière-plan couleur, photo ou dégradé. Learn DXPR BuilderBuild pagesElementen stylenOntwerpgidsen ## In this guide Related guides - [Faire aller une section de bord à bord](/fr/hc/documentation/learn-dxpr-builder/design/full-width-layouts) - [Animer les éléments au défilement, au survol ou au clic](/fr/hc/documentation/learn-dxpr-builder/design/animation-tab) - [Hero section](/hc/documentation/learn-dxpr-builder/tutorials/hero-section) Vous pouvez remplir toute section d’une couleur, d’une photo ou d’un dégradé. Couleur et photo viennent du panneau **Style**, que sections, lignes, colonnes et éléments ont tous. Les sections ajoutent un panneau **Background effects** pour les dégradés, les photos fixes et parallaxe et les vidéos YouTube. L’exemple construit une section bleu marine avec une photo de ville, du texte blanc et un dégradé par-dessus. La vidéo ajoute une photo derrière une section, puis la couvre d’un dégradé. ## Ajouter une couleur et une photo 1. Cliquez sur **Add Elements** dans la zone de contenu vide et choisissez **Section** dans l’onglet **Layout**. 2. Survolez la section et ouvrez **More > Settings**. 3. Ouvrez le panneau **Style**. 4. Choisissez un échantillon bleu marine sombre pour **Background**. 5. Choisissez le blanc pour **Font color**. 6. Sous **Background image**, cliquez sur **Select Image**. Cherchez dans la médiathèque, cochez une photo et cliquez sur **Insert selected**. 7. Réglez **Background style** sur **Cover**. 8. Réglez **Background position** sur **Center center** et cliquez sur **Save**. 9. Cliquez sur **+** sur la section et choisissez **Text** dans l’onglet **Content**. 10. Saisissez un titre, comme `Evening lectures`, et une ligne en dessous. Mettez le titre en **Heading 2** et centrez les deux lignes dans la barre d’outils de l’éditeur. 11. Ouvrez le panneau **Style**, réglez **Font color** sur le blanc et cliquez sur **Save**. ## Ajouter un dégradé 1. Survolez la section et ouvrez de nouveau **More > Settings**. 2. Ouvrez le panneau **Background effects** et réglez **Background effect** sur **Gradient**. 3. Choisissez une **Start color** et une **End color**, puis cliquez sur **Save**. 4. Cliquez sur **Save** sur la barre d’outils, ouvrez le menu d’affichage (l’icône en forme d’œil) et choisissez **Preview**. ## Ce que vous voyez Après les premières étapes, la photo remplit toute la section derrière le titre blanc. **Cover** recadre ce qui ne tient pas, et **Center center** garde le milieu de la photo à l’écran. La couleur bleu marine ne se voit que pendant le chargement de la photo ou là où la photo ne va pas. Le dégradé fond de la couleur de départ en haut vers la couleur de fin en bas. Il se trouve au-dessus de la photo. Les couleurs opaques couvrent complètement la photo ; les couleurs avec de la transparence la laissent transparaître. ## Paramètres ### Panneau Style (chaque section, ligne, colonne et élément) | Paramètre | Rôle | Valeur par défaut | |---|---|---| | **Background** | Une couleur de remplissage depuis le sélecteur de couleur ou un échantillon du thème | Aucune | | **Background image** | Une image depuis la médiathèque, choisie avec **Select Image** | Aucune | | **Background style** | **Cover** remplit l’élément et recadre ; **Contain** montre toute l’image et peut laisser des vides ; **No repeat** la montre une fois à sa taille ; **Repeat** la répète en mosaïque | **Défauts du thème** | | **Background position** | Quelle partie de l’image reste à l’écran quand elle est recadrée, comme **Center center** ou **Left top** | **Défauts du thème** | Quand la génération d’images IA est configurée, **Background image** accepte aussi un prompt. Voir [Génération d’images IA](/hc/documentation/learn-dxpr-builder/ai/image-generation). ### Panneau Background effects (sections uniquement) | Effet d’arrière-plan | Rôle | Réglages supplémentaires | |---|---|---| | **Simple image** (défaut) | La photo défile avec la page | Aucun | | **Fixed image** | La photo reste en place pendant que la page défile dessus | Aucun | | **Parallax image** | La photo bouge moins vite que la page. Voir [Section héro](/hc/documentation/learn-dxpr-builder/tutorials/hero-section) pour un exemple. | **Parallax speed**, **Parallax mode** (**Fixed** ou **Local**), **Disable on mobile** | | **Gradient** | Deux couleurs fondent sur la section, au-dessus de la photo s’il y en a une | **Start color**, **End color**, **Gradient direction** (180 degrés de haut en bas), **Start position**, **End position** | | **YouTube video** | Une vidéo YouTube muette remplit la section ; cochez **Loop** pour la répéter | **YouTube video URL**, **Video options**, **Start time in seconds**, **Stop time in seconds** | Les effets fixe et parallaxe bougent la photo définie dans le panneau **Style**. Une vidéo YouTube n’a besoin d’aucune photo. ## Si vous ne voyez pas l’arrière-plan - **Il n’y a pas de panneau Background effects.** Seules les sections l’ont. Survolez la section, pas une ligne, une colonne ni un élément, et ouvrez **More > Settings**. - **La photo est coupée.** **Cover** recadre ce qui ne tient pas dans la section. Changez **Background position** pour garder le sujet à l’écran, ou choisissez **Contain**. - **Le dégradé cache la photo.** Le dégradé se trouve au-dessus, et les couleurs opaques couvrent la photo. Baissez l’opacité de **Start color** et **End color** dans le sélecteur de couleur. - **La section ne montre aucun dégradé.** Un dégradé a besoin des deux couleurs. Choisissez une **Start color** et une **End color**. - **La vidéo YouTube ne joue pas.** **YouTube video URL** est vide ou n’est pas un lien vers une seule vidéo. Collez l’adresse complète de la vidéo, comme `https://www.youtube.com/watch?v=` suivi de son identifiant. ## Et ensuite ? - [Mises en page pleine largeur](/hc/documentation/learn-dxpr-builder/design/full-width-layouts) : laisser l’arrière-plan et le contenu aller de bord à bord. - [Onglet Animation](/hc/documentation/learn-dxpr-builder/design/animation-tab) : faire apparaître le texte en fondu quand la section défile à l’écran. - [Section héro](/hc/documentation/learn-dxpr-builder/tutorials/hero-section) : construire un en-tête de page complet avec une photo parallaxe.