Mettre une couleur ou une photo en arrière-plan.
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.
- 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.
- Survolez la Section, cliquez sur Plus, puis Paramètres.
- 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.
- 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.
- Réglez Background style sur Cover et Background position sur Center center.
- Ouvrez le panneau Background effects et réglez Background effect sur Gradient. Votre photo reste ; le dégradé se place dessus.
- Dans le champ de couleur de Start color, saisissez
rgba(0, 0, 0, 0.6): du noir à 60 %. Saisissezrgba(0, 0, 0, 0.3)pour End color. Laissez Gradient direction à 180, pour que le voile aille du haut vers le bas. - Cliquez sur Enregistrer dans la boîte de dialogue. La section montre la photo sous un voile sombre.
- 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.
- 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 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.
- 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. - 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 : réglez la couleur du titre sur votre photo et vérifiez son contraste.