# Section d'arrière-plan dynamique > **Ce que vous apprendrez** > > * Comment ajouter et configurer des sections d'arrière-plan dynamiques > * Options avancées d'arrière-plan incluant vidéos, images et superpositions > * Optimisation mobile et paramètres d'arrière-plan responsives > * Animations et effets de transition *** ## 🎯 Qu'est-ce que la section d'arrière-plan dynamique ? Le **Section d'arrière-plan dynamique** est un système d'arrière-plan puissant et flexible dans Plain Jane v3.1 qui vous permet de créer des arrière-plans de page immersifs avec des options de personnalisation avancées. Contrairement aux arrière-plans statiques, cette section prend en charge les arrière-plans vidéo, les superpositions d'images, les dégradés et les configurations mobiles responsives. **Fonctionnalités clés :** * Prise en charge des arrière-plans vidéo avec images de secours * Superpositions en dégradé avec contrôle de l'opacité * Configurations séparées pour mobile et bureau * Animations et effets de transition * Plusieurs options de dimensionnement et de positionnement de l'arrière-plan * Chargement optimisé pour les performances Disponible dans : * ✅ Plain Jane v3.1+ * ✅ Plain Jane Interactive v2+ *** ## 🔧 Comment ajouter une section d'arrière-plan dynamique 1. Aller à **Boutique en ligne > Thèmes > Personnaliser** 2. Accédez à la page où vous souhaitez ajouter l'arrière-plan 3. Cliquer sur **Ajouter une section** 4. Sélectionnez **Arrière-plan dynamique** 5. Configurez les paramètres d'arrière-plan dans la barre latérale > 💡 **Remarque**: Cette section est souvent utilisée sur les pages d'accueil, les pages de destination et les pages promotionnelles spéciales. *** ## 🖼️ Options de configuration de l'arrière-plan ### **Style d'arrière-plan** **Arrière-plan en couleur** * Option d'arrière-plan couleur unie * Choisissez n'importe quelle valeur hexadécimale * Paramètres de couleur séparés pour bureau et mobile * Idéal pour les designs minimalistes **Arrière-plan image** * Téléchargez des images d'arrière-plan personnalisées * Prise en charge des images haute résolution * Plusieurs options de dimensionnement et de positionnement * Optimisation automatique pour le web **Arrière-plan vidéo** * Téléchargez des fichiers vidéo MP4 pour des arrière-plans dynamiques * Remplacement automatique par une image sur mobile (pour la performance) * Contrôles de lecture en boucle et lecture automatique * Optimisé pour les performances et l'utilisation des données ### **Paramètres d'arrière-plan pour bureau** **Couleur d'arrière-plan** * Couleur d'arrière-plan principale pour le bureau * Par défaut : `#ffffff` (blanc) * Utilisée comme secours lorsque les images/vidéos ne se chargent pas **Image d'arrière-plan** * Téléchargez une image d'arrière-plan spécifique au bureau * Taille minimale recommandée : 1920x1080px * Prend en charge les formats JPG, PNG, WebP **Vidéo d'arrière-plan** * Téléchargez une vidéo d'arrière-plan pour le bureau * Format MP4 recommandé * Gardez la taille du fichier sous 10 Mo pour des performances optimales * Bouclage et muet automatiques ### **Paramètres d'arrière-plan pour mobile** **Couleur d'arrière-plan mobile** * Paramètre de couleur séparé pour les appareils mobiles * Souvent différent du bureau pour une meilleure expérience mobile * Optimisé pour les écrans plus petits **Image d'arrière-plan mobile** * Image d'arrière-plan spécifique au mobile * Taille recommandée : 800x1200px (orientation portrait) * Remplace automatiquement les arrière-plans vidéo sur mobile **Afficher l'image d'arrière-plan sur mobile** * Basculer pour activer/désactiver les images sur mobile * Améliore les performances sur les connexions lentes * Utilise la couleur d'arrière-plan comme secours *** ## 🎨 Superpositions et effets de dégradé ### **Superposition haute** **Couleur supérieure de la superposition** * Couleur de superposition en dégradé en haut de l'arrière-plan * Crée de la profondeur et améliore la lisibilité du texte * Paramètres séparés pour bureau et mobile **Opacité de la superposition haute** * Contrôlez la transparence de la superposition haute (0-100%) * Bureau : opacité ajustable pour une flexibilité de design * Mobile : contrôle d'opacité séparé pour l'optimisation mobile ### **Superposition basse** **Couleur inférieure de la superposition** * Couleur de superposition en dégradé en bas * Crée des transitions de couleur fluides * Améliore la hiérarchie visuelle **Opacité de la superposition basse** * Contrôlez la transparence de la superposition basse * Paramètres indépendants pour bureau et mobile * Permet des effets subtils ou dramatiques *** ## 📱 Optimisation mobile ### **Comportement réactif** **Changement automatique pour mobile** * Les vidéos basculent automatiquement vers des images sur mobile * Optimisé pour l'utilisation des données mobiles * Maintient la cohérence visuelle entre les appareils **Paramètres spécifiques au mobile** * Couleur, image et paramètres de superposition séparés * Tailles de fichiers optimisées pour l'affichage mobile * Considérations d'interaction adaptées au tactile **Optimisation des performances** * Chargement paresseux pour les images d'arrière-plan * Fichiers vidéo compressés pour un chargement plus rapide * Sélection automatique du format en fonction du support du navigateur *** ## ⚙️ Personnalisation avancée ### **Dimensionnement de l'arrière-plan** **Cover (Par défaut)** * Met à l'échelle l'arrière-plan pour couvrir toute la zone * Peut recadrer des parties de l'image/vidéo * Idéal pour les effets en plein écran **Contain** * Met à l'échelle pour s'adapter au conteneur * Affiche l'image/vidéo en entier * Peut laisser des espaces vides **Auto** * Utilise la taille naturelle du média d'arrière-plan * Aucune mise à l'échelle appliquée * Idéal pour des exigences de design spécifiques ### **Position de l'arrière-plan** **Centrer (Par défaut)** * Centre l'arrière-plan dans l'espace disponible * Composition équilibrée **Alignement haut/bas** * Alignez en haut ou en bas du conteneur * Utile pour des points focaux spécifiques **Alignement gauche/droite** * Contrôle du positionnement horizontal * Possibilités de mise en page créatives *** ## 🚀 Meilleures pratiques ### **Optimisation des performances** **Arrière-plans vidéo** * Gardez les fichiers vidéo sous 10 Mo * Utilisez l'encodage H.264 pour une meilleure compatibilité * Fournissez des images d'affiche de haute qualité comme secours * Testez sur différentes vitesses de connexion **Optimisation des images** * Compressez les images sans perte de qualité * Utilisez le format WebP lorsque c'est possible * Fournissez des tailles appropriées pour le bureau et le mobile * Considérez l'impact de la taille des fichiers sur les temps de chargement ### **Considérations de conception** **Lisibilité du contenu** * Utilisez des superpositions pour garantir la lisibilité du texte * Testez les rapports de contraste pour l'accessibilité * Tenez compte des différentes conditions de visualisation des appareils * Fournissez des couleurs de secours pour les échecs de chargement **Expérience mobile** * Priorisez la performance mobile sur les effets visuels * Testez sur de vrais appareils mobiles avec des connexions lentes * Considérez les implications de l'utilisation des données pour les utilisateurs * Fournissez des solutions de repli significatives ### **Accessibilité** **Sensibilité au mouvement** * Fournissez des options pour désactiver les arrière-plans vidéo * Respectez les préférences de mouvement de l'utilisateur * Utilisez des animations subtiles lorsque possible * Testez avec des outils d'accessibilité **Contraste des couleurs** * Assurez un contraste suffisant pour la lisibilité du texte * Testez avec diverses combinaisons d'arrière-plans * Tenez compte des daltoniens * Utilisez les dégradés de superposition de manière stratégique *** ## 🔧 Dépannage ### **Problèmes courants** **Vidéo ne se lit pas** * Vérifiez le format du fichier vidéo (MP4 recommandé) * Vérifiez que la taille du fichier est inférieure aux limites * Assurez-vous des paramètres d'encodage appropriés * Testez sur différents navigateurs **Mauvaise performance mobile** * Réduisez la taille des fichiers image * Activez les optimisations d'arrière-plan mobile * Testez sur de vrais appareils mobiles * Envisagez de désactiver la vidéo sur mobile **Problèmes de chargement** * Optimisez les tailles des fichiers image et vidéo * Vérifiez les exigences de connexion Internet * Vérifiez que les formats de fichiers sont pris en charge * Testez avec différents paramètres de mise en cache du navigateur ### **Compatibilité des navigateurs** **Prise en charge vidéo** * Navigateurs modernes : prise en charge complète * Navigateurs plus anciens : repli sur les images * Navigateurs mobiles : remplacement par des images pour la performance **Formats d'image** * WebP : Meilleure compression, prise en charge par les navigateurs modernes * JPEG : Compatibilité universelle * PNG : Idéal pour les graphiques avec transparence *** --- # Agent Instructions: 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: ``` GET https://docs.openspaces.design/plain-jane-docs-v2-fr/readme-1/sections-and-features/dynamic-background-section.md?ask= ``` The question should be specific, self-contained, and written in natural language. 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.