Une image d'arrière-plan remplira rarement parfaitement la fenêtre du navigateur, sauf si elle correspond au rapport hauteur/largeur exact de l'écran du visiteur. C'est un comportement attendu — les fenêtres de navigateur existent dans d'innombrables tailles et orientations, donc SeedProd vous offre trois options de taille d'arrière-plan pour contrôler la façon dont l'image est affichée. Comprendre quelle option utiliser vous aidera à obtenir le résultat souhaité.

Options de taille d'arrière-plan

Vous pouvez modifier la taille de votre image d'arrière-plan en modifiant les paramètres d'arrière-plan de la section ou de la page dans l'éditeur SeedProd. Les trois options disponibles se comportent comme suit :

Couvrir (Défaut)

L'image s'agrandit pour remplir complètement la zone d'arrière-plan. Aucun espace vide n'est jamais montré, mais des parties de l'image peuvent être rognées en fonction de la taille de l'écran et du rapport hauteur/largeur du visiteur.

C'est le réglage par défaut et il fonctionne bien pour la plupart des arrière-plans de héros pleine largeur où remplir la zone est plus important que de montrer l'intégralité de l'image. Pour contrôler quelle partie de l'image reste visible lorsqu'elle est rognée, ajustez le paramètre Position de l'arrière-plan (point focal) — par exemple, le régler sur Centre Centre maintient le milieu de l'image visible.

Contenir

L'image s'agrandit pour s'adapter entièrement à la zone d'arrière-plan sans être rognée. L'image complète est toujours visible, mais si le rapport hauteur/largeur de l'image ne correspond pas au conteneur, un espace vide apparaîtra autour d'elle, rempli par la couleur d'arrière-plan.

Utilisez Contenir lorsqu'il est important que l'image entière soit toujours visible — par exemple, un logo, un diagramme ou une illustration où le rognage supprimerait du contenu significatif. Définissez une couleur d'arrière-plan qui complète l'image pour remplir l'espace vide.

Automatique

L'image s'affiche dans sa taille d'origine sans mise à l'échelle. Si l'image est plus petite que le conteneur, elle se répétera par défaut ; si elle est plus grande, elle débordera et sera rognée. Cette option vous donne le contrôle le plus direct, mais nécessite que l'image soit dimensionnée avec précision pour le conteneur.

Choisir le bon réglage

• L'arrière-plan remplit la zone sans espaces → utilisez Couvrir et ajustez la Position de l'arrière-plan pour contrôler quelle partie de l'image est centrée.
• L'image complète doit toujours être visible → utilisez Contenir et définissez une couleur d'arrière-plan pour remplir l'espace environnant.
• L'image a une taille fixe spécifique → utilisez Automatique et dimensionnez votre image pour qu'elle corresponde exactement aux dimensions du conteneur.

Recommandations de taille d'image

Pour de meilleurs résultats avec le réglage Couvrir, utilisez une image d'arrière-plan d'au moins 1920 × 1080 pixels et exportez-la avec une taille de fichier appropriée pour le web (généralement moins de 300 Ko pour les images JPEG). Une image large, orientée paysage, s'agrandira et se rognera de manière plus prévisible sur différentes tailles d'écran qu'une image carrée ou portrait.

Si votre image d'arrière-plan ne s'affiche toujours pas correctement après avoir ajusté ces paramètres, essayez d'expérimenter avec l'option Position de l'arrière-plan pour décaler le point focal, ou utilisez une image source plus large qui offre plus de flexibilité lorsque le recadrage se produit sur des écrans plus étroits.