Le panneau Images de fond habille un bloc d’une ou de plusieurs images superposées. Cet article explique comment ajouter une image de fond et régler sa taille, sa position et sa répétition. Vous saurez aussi gérer la bibliothèque des fonds.
Avant de commencer
- Le panneau Images de fond s’affiche sur les blocs qui encadrent un contenu. Ce sont le Conteneur, l’Accordéon et ses éléments, le Média, l’Intégration, la modale, la navigation contextuelle et les cartes d’une liste de contenus.
- Les images de fond viennent d’une bibliothèque des fonds, séparée de la médiathèque. Elles habillent le site et n’apparaissent pas parmi vos médias.
- Un fond de couleur ou un dégradé se règle dans le panneau Couleurs : Colorer un bloc.
Ajouter une image de fond
- Sélectionnez le bloc et ouvrez l’onglet Styles de l’inspecteur.
- Dépliez le panneau Images de fond. Il est déplié d’office sur un bloc qui a une image de fond.
- Cliquez sur Ajouter une couche. La fenêtre Choisir ou envoyer un fond s’ouvre sur la bibliothèque des fonds.
- Cliquez sur une ou plusieurs images. Chaque clic ajoute l’image à la sélection ou l’en retire.
- Cliquez sur Ajouter. Le bouton affiche le nombre d’images choisies, par exemple Ajouter (2). Chaque image devient une couche du fond.
Une couche naît en taille Auto, centrée et sans répétition. Aucune couche vide n’est créée tant que vous n’avez pas choisi d’image.
Régler une couche
Chaque couche porte le nom de son fichier. Cliquez sur son chevron pour la déplier : un aperçu montre la taille, la position et la répétition réglées. Changer l’image remplace l’image de la couche.
| Réglage | Valeurs | Valeur par défaut |
|---|---|---|
| Taille | Auto : la taille naturelle de l’image. Couvrante : l’image couvre tout le bloc, quitte à être rognée. Contenue : l’image entière tient dans le bloc, quitte à laisser du vide. Personnalisée : une Largeur et une Hauteur en px, %, vw, vh ou rem. Un champ vide vaut auto. | Auto |
| Position | Une grille de neuf points pour caler l’image sur un coin, un bord ou le centre. Les champs Horizontale et Verticale donnent une valeur précise, en % par défaut ou en px, vw, vh ou rem. | Centrée, 50 % et 50 % |
| Répétition | Aucune, Les deux, X pour répéter en largeur ou Y pour répéter en hauteur. | Aucune |
Par exemple, posez une texture répétée sur Les deux, puis par-dessus un motif centré sans répétition.
Superposer plusieurs couches
- La première couche de la liste est peinte au-dessus des autres.
- À partir de deux couches, les flèches Monter et Descendre de chaque couche changent leur ordre.
- Retirer la couche enlève la couche du bloc. L’image reste dans la bibliothèque des fonds.
Changer le fond au survol ou sur téléphone
Les images de fond se règlent par état et par écran, comme les autres réglages de l’onglet Styles. Choisissez l’état et l’écran dans les deux rangées du haut, puis réglez les couches. Le panneau montre les couches de l’état et de l’écran choisis. Un bloc peut ainsi changer d’image au survol, ou porter une image plus légère sur Mobile.
Un bloc qui porte un style enregistré avec des images de fond les reprend tant que vous n’y touchez pas. Dès que vous modifiez une couche, le bloc a ses propres images. Les icônes du haut du panneau rendent les images du style, les retirent sur ce bloc ou retirent les vôtres.
Gérer la bibliothèque des fonds
La fenêtre Choisir ou envoyer un fond s’ouvre depuis Ajouter une couche ou Changer l’image.
| Action | Comment |
|---|---|
| Envoyer des images | Cliquez sur Envoyer un fichier, ou glissez vos fichiers dans la fenêtre. Plusieurs fichiers partent en une fois. |
| Chercher une image | Tapez une partie du nom de fichier dans Chercher un fond. |
| Voir le détail | Cliquez sur une vignette. Le panneau de côté montre l’image agrandie, son nom et son poids. |
| Choisir une image | Pour remplacer l’image d’une couche, cliquez sur une vignette puis sur Choisir. |
| Supprimer une image | Dans le panneau de côté, cliquez sur Supprimer définitivement, puis confirmez. |
- Les formats acceptés sont SVG, WEBP, PNG, JPG, JPEG et AVIF. Le type est vérifié sur le contenu du fichier.
- Un SVG est nettoyé à l’envoi : ses scripts et ses adresses vers d’autres sites sont retirés. Un SVG illisible est refusé.
- Un fichier qui porte le nom d’un fichier déjà envoyé le remplace.
- Les images envoyées comptent dans l’espace de stockage de votre offre.
- Tout membre qui peut modifier les contenus peut envoyer et supprimer une image de fond.
Une bibliothèque vide affiche Aucun fichier pour l’instant. Envoyez-en un ci-dessus. Une recherche sans réponse affiche Aucun résultat.