# Poser un arrière-plan

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](https://lovelyrender.com/fr/documentation/couleurs-d-un-bloc/).

## Ajouter une image de fond

1. Sélectionnez le bloc et ouvrez l’onglet **Styles** de l’inspecteur.
2. Dépliez le panneau **Images de fond**. Il est déplié d’office sur un bloc qui a une image de fond.
3. Cliquez sur **Ajouter une couche**. La fenêtre **Choisir ou envoyer un fond** s’ouvre sur la bibliothèque des fonds.
4. Cliquez sur une ou plusieurs images. Chaque clic ajoute l’image à la sélection ou l’en retire.
5. 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.

![Le panneau Images de fond d’une carte avec une couche dépliée, rangs-de-vignes.jpg : son aperçu, le bouton Changer l’image, la taille Couvrante, la position calée en bas au centre, Horizontale 50 % et Verticale 100 %, la répétition Aucune, puis les boutons Retirer la couche et Ajouter une couche.](https://static.lovelyrender.com/uploads/2026/10/966-doc-pages-fonds.png)

| 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.

**Attention :** Si vous retirez les images héritées puis mettez à jour le style, les images sortent du style pour tous les blocs qui le portent. [Enregistrer le style d’un bloc](https://lovelyrender.com/fr/documentation/styles-enregistres/) détaille les styles enregistrés.

## 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.**

**Attention :** **Supprimer définitivement** efface le fichier pour tout le site. Les blocs qui l’utilisaient en image de fond ne l’affichent plus. Cette suppression ne se défait pas.

## Voir aussi

- [Colorer un bloc](https://lovelyrender.com/fr/documentation/couleurs-d-un-bloc/)
- [Régler la taille, les bordures et les effets](https://lovelyrender.com/fr/documentation/taille-bordures-effets/)
- [Conteneur](https://lovelyrender.com/fr/documentation/bloc-conteneur/)
- [Envoyer vos photos et vos vidéos](https://lovelyrender.com/fr/documentation/images-et-videos/)