> For the complete documentation index, see [llms.txt](https://docs.openspaces.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.openspaces.design/plain-jane-docs-v2-fr/plain-jane-interactive/sections-and-features/setting-the-background.md). # Définir l'arrière-plan L'arrière-plan est la base de votre Espace interactif. Ce guide explique comment sélectionner, téléverser et optimiser les images d'arrière-plan pour la meilleure expérience interactive. ## 🎨 Exigences pour l'image d'arrière-plan ### Spécifications recommandées * **Résolution**: Minimum 1600x900px (rapport d'aspect 16:9) * **Format de fichier**: JPG ou PNG (WebP pris en charge pour un chargement plus rapide) * **Taille du fichier**: Inférieure à 2 Mo pour des performances optimales * **Qualité**: Haute résolution pour un affichage net sur tous les appareils ### Considérations sur le rapport d'aspect * **16:9 (1920x1080)**: Format large standard, fonctionne bien sur la plupart des appareils * **4:3 (1600x1200)**: Format plus carré, idéal pour les scènes axées sur le produit * **21:9 (2560x1080)**: Ultra-large, sensation cinématographique pour les prises de vue lifestyle ## 📂 Téléverser votre arrière-plan ### Étape 1 : Accédez aux paramètres d'arrière-plan 1. **Ouvrir le personnalisateur de thème** * Aller à **Boutique en ligne → Thèmes** * Cliquer sur **Personnaliser** sur Plain Jane Interactive 2. **Sélectionner la section Environnement Interactif** * Cliquez sur votre section Environnement Interactif * Recherchez **Arrière-plan** paramètres ### Étape 2 : Téléverser l'image 1. **Sélectionner la source de l'image** * **Téléverser nouveau**: Ajouter une image depuis votre ordinateur * **Choisir existant**: Sélectionner parmi les fichiers téléversés * **Images gratuites**: Parcourir les photos de stock de Shopify 2. **Conseils d'optimisation d'image** * Utiliser des images sources de haute qualité * Compresser avant de téléverser (outils comme TinyPNG) * Envisager l'utilisation du format WebP pour les navigateurs modernes ## 🔧 Paramètres d'affichage de l'arrière-plan ### Options d'ajustement de l'image #### Cover (Recommandé) * **Comportement**: Remplit tout le conteneur * **Avantage**: Aucun espace vide, couverture toujours complète * **Considération**: Peut recadrer des parties de l'image * **Idéal pour**: Scènes lifestyle, ambiances de pièce #### Contain * **Comportement**: Affiche l'image entière dans le conteneur * **Avantage**: Ne recadre jamais l'image * **Considération**: Peut laisser des espaces vides autour de l'image * **Idéal pour**: Photos de produit avec des détails importants sur les bords #### Fill * **Comportement**: Étire l'image pour s'adapter exactement * **Avantage**: Ajustement parfait au conteneur * **Considération**: Peut déformer les proportions de l'image * **Idéal pour**: Fonds abstraits, motifs ### Position de l'arrière-plan Contrôlez quelle partie de l'image est visible lorsque des recadrages se produisent : * **Centre**: Par défaut, garde le sujet principal visible * **Haut**: Met l'accent sur la partie supérieure de l'image * **Bas**: Met en valeur la section inférieure * **Gauche/Droite**: Pour les images avec des sujets décentrés ### Attachement de l'arrière-plan * **Défilement**: L'arrière-plan se déplace avec le contenu de la page (par défaut) * **Fixe**: L'arrière-plan reste en place tandis que le contenu défile * **Local**: L'arrière-plan défile avec le contenu de l'élément ## 🎯 Choisir le bon arrière-plan ### Types de scènes #### Ambiances de pièce **Parfait pour**: Meubles, décoration intérieure, éclairage * Espaces intérieurs bien éclairés * Multiples surfaces pour le placement des produits * Contexte produit naturel **Conseils**: * Assurez un bon éclairage dans toute la scène * Évitez les espaces trop chargés ou encombrés * Envisagez différents angles de pièce (coin vs face) #### Contextes lifestyle **Parfait pour**: Mode, accessoires, soins personnels * Personnes utilisant ou portant des produits * Environnements naturels * Situations authentiques **Conseils**: * Inclure des modèles diversifiés lorsque possible * Montrer les produits dans des cas d'utilisation réalistes * Conserver l'attention sur les éléments achetables #### Vitrines de produits **Parfait pour**: Produits techniques, collections, nouvelles sorties * Arrière-plans propres et minimalistes * Agencements de produits ciblés * Mise en scène professionnelle **Conseils**: * Utiliser des arrière-plans neutres qui ne concurrencent pas * Assurer un fort contraste entre les produits et l'arrière-plan * Créer une hiérarchie visuelle avec l'éclairage ### Considérations de couleur et de contraste #### Arrière-plans à fort contraste * **Avantages**: Les points interactifs ressortent clairement * **Idéal pour**: Designs épurés et minimalistes * **Exemples**: Fonds de studio blancs, scènes sombres et dramatiques #### Arrière-plans à faible contraste * **Avantages**: Sensation subtile et sophistiquée * **Défis**: Les points peuvent être plus difficiles à voir * **Solutions**: Utiliser des couleurs de points contrastées, ajouter des ombres subtiles ## 📱 Optimisation mobile ### Comportement réactif de l'arrière-plan * **Mise à l'échelle automatique**: L'image s'ajuste à la taille de l'écran * **Préservation du point focal**: Les zones importantes restent visibles * **Optimisation des performances**: Images plus petites pour les appareils mobiles ### Considérations spécifiques au mobile * **Compositions plus simples**: Moins d'éléments fonctionnent mieux sur les petits écrans * **Produits plus grands**: S'assurer que les éléments achetables sont visibles * **Accessibilité tactile**: Laisser de l'espace autour des zones interactives ### Arrière-plans mobiles alternatifs Envisagez d'utiliser des images différentes pour le mobile : * **Recadrages plus serrés**: Se concentrer sur les produits clés * **Orientations verticales**: Mieux adaptées aux écrans en portrait * **Scènes simplifiées**: Moins d'éléments distrayants ## 🎨 Techniques avancées d'arrière-plan ### Arrière-plans en couches Créer de la profondeur avec plusieurs couches d'image : ```css .interactive-background { background-image : url('foreground-layer.png'), url('main-background.jpg'); background-position : center center, center center ; } ``` ### Arrière-plans animés De subtiles animations peuvent améliorer l'expérience : * **Défilement parallax**: L'arrière-plan se déplace à une vitesse différente * **Mouvements subtils**: Effets de flottement ou de balancement doux * **Transitions de couleur**: Changements d'éclairage progressifs ### Variations saisonnières Mettre à jour les arrière-plans pour différentes saisons : * **Thèmes de fêtes**: Décorations et couleurs festives * **Produits saisonniers**: Scènes extérieures d'été vs scènes intérieures d'hiver * **Périodes promotionnelles**: Style spécifique aux soldes ## 🔍 Tests et optimisation ### Tests de performance * **Vitesse de chargement**: Surveiller les temps de chargement des images * **Performance mobile**: Tester sur divers appareils * **Utilisation de la bande passante**: Tenir compte des utilisateurs soucieux de leurs données ### Tests visuels * **Différentes tailles d'écran**: Tablette, mobile, bureau, grands écrans * **Visibilité des points**: S'assurer que les éléments interactifs se démarquent * **Précision des couleurs**: Vérifier sur différents moniteurs ### Idées de tests A/B * **Styles d'image**: Lifestyle vs axé produit * **Schémas de couleurs**: Tons chauds vs tons froids * **Niveaux de complexité**: Arrière-plans minimalistes vs détaillés * **Pertinence saisonnière**: Imagerie actuelle vs intemporelle ## 🐛 Dépannage ### Problèmes courants #### Image ne se charge pas * **Vérifier la taille du fichier**: S'assurer qu'elle est sous les limites de la plateforme * **Vérifier le format**: Utiliser des formats pris en charge (JPG, PNG, WebP) * **Permissions de fichier**: Confirmer que l'image est accessible #### Affichage de mauvaise qualité * **Résolution**: Utiliser des images sources à plus haute résolution * **Compression**: Trouver l'équilibre entre taille de fichier et qualité * **Optimisation du format**: Envisager WebP pour une meilleure compression #### Problèmes d'affichage sur mobile * **Rapport d'aspect**: Tester sur différentes dimensions d'écran * **Vitesse de chargement**: Optimiser pour les réseaux mobiles * **Interactions tactiles**: S'assurer que les points restent accessibles ### Problèmes de performance * **Chargement lent**: Compresser les images, utiliser des formats modernes * **Utilisation de la mémoire**: Surveiller les impacts des gros fichiers * **Préoccupations liées à la bande passante**: Fournir des alternatives en basse résolution ## 💡 Idées créatives d'arrière-plan ### Arrière-plans narratifs * **Narration de marque**: Montrer l'histoire ou les valeurs de l'entreprise * **Parcours client**: Différents stades de la vie ou cas d'utilisation * **Évolution du produit**: Scénarios avant/après ### Environnements interactifs * **Showrooms virtuels**: Recréer l'agencement de magasins physiques * **Espaces événementiels**: Environnements de salon professionnel ou de boutique éphémère * **Espaces clients**: Maisons réelles ou lieux de travail de clients ### Approches artistiques * **Arrière-plans illustrés**: Œuvres d'art ou graphiques personnalisés * **Médias mixtes**: Combiner photographie avec illustrations * **Compositions abstraites**: Interprétations artistiques des thèmes de la marque ## 📊 Analyses et insights ### Métriques de performance de l'arrière-plan * **Taux d'engagement**: Temps passé sur les sections interactives * **Modèles de clics**: Où les utilisateurs interagissent le plus * **Suivi des conversions**: Ventes provenant de différents arrière-plans * **Préférences par appareil**: Engagement mobile vs desktop ### Optimisation basée sur les données * **Cartographie thermique**: Identifier les zones les plus cliquées * **Analyse de conversion**: Quels arrière-plans génèrent des ventes * **Retour utilisateur**: Interroger les clients sur leurs préférences visuelles * **Performance saisonnière**: Suivre l'efficacité des arrière-plans dans le temps --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://docs.openspaces.design/plain-jane-docs-v2-fr/plain-jane-interactive/sections-and-features/setting-the-background.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.