Régler une image de fond

Une image de fond habille un conteneur ; elle ne détermine pas sa hauteur et ne remplace pas une image de contenu. Elle convient à une ambiance de section ou à une carte décorative. Si la photographie apporte une information importante, utilisez plutôt un élément Image avec un texte alternatif.

1. Choisir une image du projet

Sélectionnez le conteneur, puis ouvrez Arrière-plan dans le panneau de style en Expert. Cliquez sur le fond actuel, choisissez l’onglet Image, puis Sélectionner un fichier. Choisissez une photographie dans le gestionnaire de fichiers du projet. Le fond se met à jour dans l’aperçu.

Le gestionnaire permet aussi d’importer un fichier. Pour apprendre à gérer les images elles-mêmes, consultez choisir, remplacer et cadrer une image.

Le conteneur doit avoir une surface visible : une image de fond n’ajoute pas de hauteur à une section vide. Commencez par sa disposition, son contenu et ses dimensions.

2. Choisir ce qui doit rester visible

Dans les réglages de l’image, ouvrez Taille.

Cover ne déforme pas la photographie : il la recadre pour remplir la zone. Une carte étroite et une section large ne montrent donc pas la même partie de l’image.

3. Ajuster position et répétition

Position choisit la partie de l’image à privilégier : centre, haut, bas ou un côté. Si un visage disparaît avec Cover, changez d’abord la position plutôt que la taille du conteneur.

Répétition décide si le fond se reproduit horizontalement, verticalement ou dans les deux directions. Pour une photographie unique, choisissez No repeat, sans répétition. Un motif peut au contraire avoir besoin de se répéter.

La démonstration compare un fond couvrant et un fond contenu sur la même carte. Le texte et les dimensions du conteneur restent identiques : seul le traitement de l’image change.

4. Garder le texte lisible

Le contrôle de mélange combine l’image avec la couleur de fond. Dans l’exemple, le mode Multiply assombrit la photographie en la combinant avec un fond sombre. Ce mode ne garantit pas à lui seul un contraste suffisant : il dépend de la couleur et de l’image choisies.

Vérifiez le texte au-dessus des zones claires et sombres. Choisissez une photographie calme, changez son cadrage ou adaptez la couleur du fond si nécessaire. Évitez de placer un paragraphe long sur une photographie très détaillée.

5. Comprendre les réglages complémentaires

Pièce jointe, le libellé affiché pour l’attachement du fond dans cette version, définit son comportement au défilement : lié à l’élément, à son contenu défilant ou à la fenêtre selon le choix. Un fond fixé à la fenêtre mérite un essai dans les navigateurs mobiles visés ; son comportement peut varier.

Origine choisit la boîte de référence du fond. Clip choisit la limite de la zone peinte. Les choix liés à la bordure, à la marge intérieure et au contenu permettent de garder le fond sous certains espaces seulement. Ils ne correspondent pas au point d’origine d’une transformation.

Pour un premier fond photographique, gardez ces réglages simples. Vous pouvez revenir aux sélecteurs après avoir validé le cadrage.

6. Vérifier le mobile

Passez au cadre mobile depuis Écran. Contrôlez le sujet visible, la lisibilité et la hauteur du conteneur. Une image couvrante peut être davantage coupée quand le conteneur devient plus étroit.

Si le cadrage doit changer selon l’écran, utilisez une règle d’écran. Changer seulement le cadre d’aperçu ne crée pas cette règle.

À retenir : choisissez une image adaptée, décidez si elle doit couvrir la zone ou rester entière, puis vérifiez sa position et le contraste sur chaque écran.