🟦 Image de Fond

Le bloc Image de Fond permet de préparer une image pour qu'elle serve d'arrière-plan : comment elle doit s'ajuster à l'écran, si elle se répète comme un motif, et où elle se positionne.

Ce bloc ne l'affiche pas lui-même à l'écran : il produit une configuration prête à l'emploi, que l'on branche ensuite dans le bloc Changer de fond, qui se charge de l'animation de transition (fondu, zoom, durée...) et de l'affichage.

📥 Entrées

• image (Image) : L'image à utiliser comme arrière-plan.
• size (Choix) : Comment l'image s'ajuste à l'écran (options : Contenue, Automatique, Couvrir - par défaut Couvrir).
• color (Couleur) : Couleur visible autour de l'image lorsqu'elle ne couvre pas tout l'écran.
• repeat (Choix) : Si et comment l'image se répète en motif (options : repeat-x, repeat-y, space, no-repeat, round - par défaut no-repeat, c'est-à-dire aucune répétition).
• positionX (Nombre + unité CSS) : Position horizontale de l'image dans son cadre.
• positionY (Nombre + unité CSS) : Position verticale de l'image dans son cadre.

📤 Sorties

• backgroundImage (Objet "Image de fond") : La configuration d'arrière-plan prête à être branchée dans l'entrée background du bloc Changer de fond.

💡 Exemple d'utilisation

Scénario : Préparer un ciel étoilé pour une scène nocturne

1. Le concepteur veut afficher un ciel étoilé en arrière-plan d'une scène de nuit.
2. Un bloc Image de Fond est ajouté au canevas et configuré avec :

• image : une photo de ciel étoilé
• size : Couvrir (pour remplir tout l'écran)
• repeat : no-repeat (l'image ne se répète pas)

1. Sa sortie backgroundImage est branchée dans l'entrée background d'un bloc Changer de fond.
2. Le bloc Changer de fond se charge ensuite d'afficher ce décor à l'écran avec une transition animée (fondu, durée, etc.).

⚙️ Détails Techniques

• Bloc de valeur, pas de flux : ce bloc n'a pas d'entrée ni de sortie de flux (in/out). Il ne s'insère pas directement dans le fil du parcours ; il se branche dans l'entrée d'un autre bloc (Changer de fond) qui, lui, gère l'affichage et l'animation.
• Compatibilité : Fonctionne avec tous les formats d'image standard (JPG, PNG, SVG) et s'adapte aux différentes résolutions d'écran.

Version documentée : v2

Mis à jour le : 06/09/2026