Comment remplacer une image d’arrière-plan sur votre site hôtelier

Points clés
• Identifier si l’image est un background ou une image classique
• Modifier l’arrière-plan depuis l’Editor si la zone est autorisée
• Utiliser le Designer pour les sections verrouillées ou complexes
• Vérifier l’affichage mobile et les réglages cover/position

L’image d’arrière-plan joue un rôle essentiel dans l’atmosphère visuelle d’un site hôtelier. Elle valorise vos chambres, votre restaurant ou vos espaces bien-être et contribue à transmettre l’expérience de votre établissement. Remplacer ce background est simple, mais nécessite quelques étapes pour garantir un rendu propre et responsive.

Voici comment procéder efficacement.

Vérifier si l’image peut être modifiée dans l’Editor

Certaines sections permettent la modification du background directement depuis l’Editor.
Pour vérifier :

Ouvrez votre site publié.
Cliquez sur Login pour accéder à l’Editor.
Survolez la section contenant l’arrière-plan.
Si le bouton Edit apparaît, la modification est autorisée.
Cliquez dessus puis cherchez une option visuelle ou une image associée.

Dans ce cas, vous pourrez :
• Remplacer l’image
• Modifier le texte associé
• Mettre à jour liens ou overlays éventuels

💡 Tous les arrière-plans ne sont pas accessibles depuis l’Editor, surtout s’ils font partie de la structure globale du site.

Remplacer l’image background via le Designer (méthode la plus courante)

Pour la majorité des sections (héro d’accueil, bandeaux, blocs visuels), la modification se fait dans le Designer.

Procédure :

Ouvrez le Designer.
Sélectionnez la section ou le bloc contenant le background.
Dans le panneau Style, repérez la zone Background.
Cliquez sur l’image actuelle.
Téléversez votre nouvelle photo ou sélectionnez-en une dans votre bibliothèque.
Vérifiez les paramètres suivants :
• Image setting : cover pour un rendu plein écran
• Position : center center pour un cadrage équilibré
• Repeat : off pour éviter les répétitions
Publiez le site.

💡 Optez pour une image large en paysage (1600–2000 px) pour garantir une qualité optimale, surtout sur grand écran.

Vérifier l’affichage mobile et tablette

Une image background peut s’afficher très différemment selon les appareils :
• Recadrage automatique vertical
• Zoom excessif
• Découpe imprévisible selon la hauteur
• Texte non lisible si contraste insuffisant

Après remplacement :
• Testez sur mobile, tablette et desktop
• Vérifiez le cadrage de l’image
• Si nécessaire, ajustez la position verticale (center top, center bottom)

💡 Certaines sections possèdent une image background spécifique au mobile. Vérifiez si une version séparée est configurée.

Optimiser l’image avant l’import

Pour un rendu premium et un chargement rapide :
• Utilisez le format WebP de préférence
• Poids recommandé : moins de 300–400 Ko
• Taille recommandée : 1600–2000 px de large
• Évitez les images trop sombres ou trop claires si du texte apparaît par-dessus
• Ajoutez un léger overlay sombre si nécessaire pour garantir la lisibilité

Si le background ne change pas après modification

Plusieurs causes possibles :
• L’élément utilise un style global partagé
• L’image est définie sur un parent (section, div, container) et non l’élément sélectionné
• Une version mobile différente est active
• Une interaction ou animation remplace le background
• Vous n’avez pas publié la mise à jour

Solution :
• Vérifiez chaque niveau de la hiérarchie
• Rafraîchissez en navigation privée
• Confirmez que vous éditez la bonne page et la bonne section

Conclusion

Remplacer une image d’arrière-plan sur votre site hôtelier est simple une fois que vous savez si la section est modifiable depuis l’Editor ou nécessite une intervention via le Designer. En optimisant votre image, en vérifiant le responsive et en ajustant les paramètres cover et position, vous garantissez un rendu élégant et professionnel à chaque visiteur.