--- url: 'https://dxpr.com/fr/hc/documentation/apprendre-dxpr-builder/parametres-des-elements/arriere-plan' title: 'Mettre une couleur ou une photo en arrière-plan | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T14:43:56+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- Donnez à une bande de votre page une couleur de marque ou une photo, pour qu’un titre ressorte et que la bande se lise comme un bloc. Vous réglez la couleur et la photo dans le panneau Style de n’importe quel élément. Une Section ajoute un panneau Background effects pour une photo fixe, une parallaxe, un dégradé ou une vidéo YouTube. La vidéo suit la recette ci-dessous : elle place une photo derrière un titre et un dégradé sombre sur la photo, pour que le titre blanc reste lisible. 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: 'Mettre une couleur ou une photo en arrière-plan' description: |- Donnez à une bande de votre page une couleur de marque ou une photo, pour qu’un titre ressorte et que la bande se lise comme un bloc. Vous réglez la couleur et la photo dans le panneau Style de n’importe quel élément. Une Section ajoute un panneau Background effects pour une photo fixe, une parallaxe, un dégradé ou une vidéo YouTube. La vidéo suit la recette ci-dessous : elle place une photo derrière un titre et un dégradé sombre sur la photo, pour que le titre blanc reste lisible. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T14:43:56+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/fr/hc/documentation/apprendre-dxpr-builder/parametres-des-elements/arriere-plan' articleSection: 'Styler vos éléments' - '@type': WebPage '@id': 'https://dxpr.com/fr/hc/documentation/apprendre-dxpr-builder/parametres-des-elements/arriere-plan' description: |- Donnez à une bande de votre page une couleur de marque ou une photo, pour qu’un titre ressorte et que la bande se lise comme un bloc. Vous réglez la couleur et la photo dans le panneau Style de n’importe quel élément. Une Section ajoute un panneau Background effects pour une photo fixe, une parallaxe, un dégradé ou une vidéo YouTube. La vidéo suit la recette ci-dessous : elle place une photo derrière un titre et un dégradé sombre sur la photo, pour que le titre blanc reste lisible. 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 --- [Centre d’aide](/fr/hc)/[Documentation](/fr/hc/documentation) /[Apprendre DXPR Builder](/fr/hc/documentation/learn-dxpr-builder) /[Créer des pages](/fr/hc/documentation/learn-dxpr-builder/build) /[Styler vos éléments](/fr/hc/documentation/learn-dxpr-builder/element-settings) # Mettre une couleur ou une photo en arrière-plan. Apprendre DXPR BuilderCréer des pagesStyler vos éléments ## Dans ce guide Guides associés - [Changer la taille et la couleur du texte](/fr/hc/documentation/apprendre-dxpr-builder/parametres-des-elements/typographie) Donnez à une bande de votre page une couleur de marque ou une photo, pour qu’un titre ressorte et que la bande se lise comme un bloc. Vous réglez la couleur et la photo dans le panneau **Style** de n’importe quel élément. Une Section ajoute un panneau **Background effects** pour une photo fixe, une parallaxe, un dégradé ou une vidéo YouTube. La vidéo suit la recette ci-dessous : elle place une photo derrière un titre et un dégradé sombre sur la photo, pour que le titre blanc reste lisible. ## Avant de commencer - Ouvrez la page dans DXPR Builder ; pointer un élément montre sa barre de contrôle avec **Plus**. Vous débutez avec le constructeur ? Voir [Votre première page](/fr/hc/documentation/apprendre-dxpr-builder/demarrage/premiere-page). - **Enregistrer** dans la boîte de dialogue garde une modification dans l’éditeur. **Enregistrer** sur la barre d’outils du constructeur au-dessus de votre contenu stocke la page et affiche « Saved field ». - **Utilisez une Section** pour une bande entière de la page. Seule une Section a **Background effects**. - **Utilisez un élément Texte ou Carte** pour une boîte colorée derrière quelques lignes dans une colonne. - **Utilisez votre thème** pour les arrière-plans sur chaque page, comme le corps de page ou le pied de page. - **Gardez les mots hors de la photo.** Une image d’arrière-plan n’a pas de texte alternatif, donc les lecteurs d’écran la sautent. Mettez votre message dans un titre au-dessus. ## Recette : un titre lisible sur une photo Du texte blanc sur une photo chargée est difficile à lire. Un dégradé sombre sur la photo corrige cela, et il continue de fonctionner quand vous changez la photo. Il vous faut une Section qui contient votre titre dans un élément de texte. 1. Survolez la **Section**, cliquez sur **Plus**, puis **Paramètres**. 2. Ouvrez le panneau **Style** et cliquez sur **Select Image** sous **Background image**. Choisissez une photo. Une miniature apparaît, avec une liste de taille d’image. 3. Dans la liste de taille d’image, choisissez une taille au moins aussi large que le plus large écran pour lequel vous concevez, ou **Original image (No resizing)**. Évitez **Optimize for fast loading** pour une bande entière. 4. Réglez **Background style** sur **Cover** et **Background position** sur **Center center**. 5. Ouvrez le panneau **Background effects** et réglez **Background effect** sur **Gradient**. Votre photo reste ; le dégradé se place dessus. 6. Dans le champ de couleur de **Start color**, saisissez `rgba(0, 0, 0, 0.6)` : du noir à 60 %. Saisissez `rgba(0, 0, 0, 0.3)` pour **End color**. Laissez **Gradient direction** à 180, pour que le voile aille du haut vers le bas. 7. Cliquez sur **Enregistrer** dans la boîte de dialogue. La section montre la photo sous un voile sombre. 8. Survolez l’élément **Texte**, cliquez sur **Plus**, puis **Paramètres**. Dans son panneau **Style**, réglez **Font color** sur blanc et cliquez sur **Enregistrer**. 9. Cliquez sur **Enregistrer** dans la barre d’outils. Vérifiez le titre par rapport à la partie la plus claire de la photo. Visez un contraste d’au moins 4,5 pour 1, ou 3 pour 1 pour les grands titres ; la page [Typographie](/fr/hc/documentation/apprendre-dxpr-builder/parametres-des-elements/typographie) explique ces objectifs. Toujours difficile à lire ? Augmentez les deux valeurs, par exemple à 0,8 et 0,5. ## Ce que vous voyez La section montre votre photo sous un voile sombre, le plus sombre en haut, avec le titre blanc dessus. **Cover** remplit toute la section, donc sur un écran étroit, plus de côtés de la photo sont rognés. ## Comment fonctionnent les réglages | Contrôle | Fonction | |---|---| | **Background** | Une couleur derrière le contenu. Le curseur d’opacité du sélecteur la rend transparente. | | **Background image** | Une image derrière le contenu : depuis **Select Image**, depuis une URL, ou depuis **AI Image Generation** sauf si votre site l’a désactivé. | | **Background style** | Comment l’image remplit l’élément. Voir le tableau suivant. | | **Background position** | Le point où l’image est épinglée. Avec **Cover**, il décide quelle partie de la photo reste visible. | | **Background style** | Résultat | |---|---| | **Theme defaults** | Sauf indication contraire de votre thème, l’image se répète à sa taille depuis le coin supérieur gauche. | | **Cover** | L’image remplit l’élément et les bords qui ne tiennent pas sont rognés. Idéal pour les photos. | | **Contain** | Toute l’image s’affiche, une fois. Des bandes vides peuvent rester sur deux côtés. Idéal pour les logos. | | **No repeat** | Une copie à sa taille. | | **Repeat** | L’image se répète en mosaïque sur l’élément. Bien pour les motifs. | La couleur se place sous l’image. Elle transparaît dans les parties claires d’une image, dans les bandes autour d’une image **Contain**, et pendant le chargement de la photo. Choisissez une couleur proche du ton principal de la photo. La taille **Optimize for fast loading** réduit une image à 1 024 px de large au maximum et l’enregistre en WebP. Cela convient à une boîte, mais semble flou sur une bande entière sur grand écran. La même image se charge sur chaque taille d’écran, téléphones inclus. Le panneau **Hover style** a ses propres **Background** et **Background image**, donc une boîte peut changer de couleur ou échanger son image au survol. ## Effets d’arrière-plan de section Ces effets exigent une Section. **Fixed image** et **Parallax image** déplacent la photo depuis **Background image**, donc réglez d’abord la photo. | **Background effect** | Ce que voient les visiteurs | Paramètres | |---|---|---| | **Simple image** | La photo défile avec la page. C’est la valeur par défaut. | aucun | | **Fixed image** | La photo reste immobile pendant que le contenu défile dessus. | aucun | | **Parallax image** | La photo défile plus lentement que le contenu. | **Parallax speed** (0 à 100 ; choisir **Parallax image** met 20 quand c’est 0), **Parallax mode** (**Fixed** ou **Local**), **Disable on mobile** (écrans de moins de 481 px de large) | | **Gradient** | Un mélange de deux couleurs, seul ou sur la photo. | **Start color**, **End color**, **Gradient direction** (1 à 360 degrés ; 180 va du haut vers le bas), **Start position**, **End position** | | **YouTube video** | Une vidéo muette est lue pendant que la section est à l’écran et se met en pause quand elle défile hors de l’écran. | **YouTube video URL**, **Start time in seconds**, **Stop time in seconds**, **Video options** | Sur une photo, le dégradé va toujours de bord à bord. **Start position** et **End position** ne s’appliquent qu’à un dégradé sans photo. ## Si l’arrière-plan ne s’affiche pas - **La photo s’affiche comme une fine bande.** Un arrière-plan n’ajoute pas de hauteur ; la section a la hauteur de son contenu et de sa marge intérieure. Ajoutez du contenu, ou activez **100% height** dans le panneau **General**. Pour plus de marge intérieure, suivez [une section plus haute](/fr/hc/documentation/apprendre-dxpr-builder/parametres-des-elements/espacement#recipe-a-taller-section). - **La photo se répète ou ne montre qu’un coin.** **Background style** est sur **Theme defaults**. Choisissez **Cover**. - **La photo semble floue sur grand écran.** **Optimize for fast loading** la limite à 1 024 px de large. Choisissez une taille plus large dans la liste de taille d’image. - **La photo est cachée derrière du noir uni.** Les couleurs du dégradé n’ont pas de transparence. Terminez chaque valeur par un nombre sous 1, comme `rgba(0, 0, 0, 0.6)`. - **Le titre reste sombre.** Une classe de couleur sous les **HTML classes** de l’élément de texte, ou une règle de thème avec `!important`, gagne. Retirez la pastille, ou voyez [Typographie](/fr/hc/documentation/apprendre-dxpr-builder/parametres-des-elements/typographie). - **L’arrière-plan a disparu après un rechargement de page.** **Enregistrer** dans la boîte de dialogue garde la modification dans l’éditeur uniquement. Cliquez sur **Enregistrer** dans la barre d’outils. - **La couleur ne s’affiche pas.** La photo la couvre. Pour une teinte sur la photo, utilisez **Gradient** dans **Background effects**. - **Start position et End position ne changent rien.** La section a une **Background image**, donc le dégradé va de bord à bord. Utilisez **Gradient direction** et des couleurs transparentes à la place. - **Une couleur de classe gagne.** Une classe comme **Primary background** sous **HTML classes** bat votre **Background**. Retirez sa pastille. - **Background ne fait rien sur un Compteur circulaire, une Barre de progression ou un Séparateur.** Ces éléments utilisent leurs propres couleurs. Réglez **Background color**, **Back color** ou **Color** dans le panneau **General**. ## Et ensuite ? - [Typographie](/fr/hc/documentation/apprendre-dxpr-builder/parametres-des-elements/typographie) : réglez la couleur du titre sur votre photo et vérifiez son contraste.