> ## Knowledge Base Index > Fetch the complete knowledge base index at: https://documentation.celestory.io/sitemap.xml > Use this file to discover available pages before exploring further. > Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash). # Afficher un décor : la chaîne des trois blocs # 🖼️ Afficher un décor : la chaîne des trois blocs Un décor plein écran n'est jamais posé par un seul bloc. Il faut en enchaîner trois : un qui va chercher l'image, un qui prépare comment elle doit s'ajuster à l'écran, et un seul qui s'enfile réellement dans le fil de l'histoire. Les deux premiers sont des **blocs de valeur** : ils se branchent sur une entrée, ils ne se posent jamais entre deux autres blocs du flux. Le troisième est un **bloc de flux** : c'est lui, et lui seul, qui prend place dans la séquence, juste avant la réplique qu'il doit habiller. --- ## 🧩 Le schéma ``` Charger image ──image──▶ Image de fond ──image de fond──▶ Fond (imageFromUrl) (createBackgroundImage) (switchBackground) url : Texte image : Image in : Flux ◀── s'enfile ici image : Image (sortie) taille : Couvrir (par défaut) fond : Image de fond couleur, répétition, durée, effet d'entrée, position x, position y effet de sortie, image de fond : sortie texte, position du texte bloc de valeur bloc de valeur out : Flux pas d'entrée/sortie de flux pas d'entrée/sortie de flux bloc de flux ``` Seul **Fond** a des points « in » et « out » de type Flux : c'est le seul des trois qui occupe une case dans la séquence du graphe. **Charger image** et **Image de fond** n'ont ni l'un ni l'autre — impossible de les enfiler dans le fil même si on le voulait, ils n'ont que des points de valeur à brancher. --- ## 🔗 Bloc par bloc ### Charger image (`imageFromUrl`) - Entrée : **url** (Texte) — le lien direct vers le fichier (`https://…`). - Sortie : **image** (Image). - Aucun point de flux : ce bloc ne fait que convertir une URL en valeur « Image », utilisable par n'importe quel bloc qui accepte une image (Image de fond, mais aussi Modifier personnage pour un portrait). ### Image de fond (`createBackgroundImage`) - Entrée **image** (Image) — reçoit la sortie du bloc précédent. - Entrée **taille** — un choix parmi *Contenue*, *Automatique*, **Couvrir** (valeur par défaut du bloc). - Entrées **couleur**, **répétition**, **position x**, **position y** — pour les cas où l'image ne remplit pas tout le cadre. - Sortie : **image de fond** — un objet « Image de fond », pas une image brute. C'est ce type précis qu'attend le bloc **Fond**. - Pas de point de flux non plus : ce bloc ne fait qu'assembler un réglage, il n'affiche rien par lui-même. ### Fond (`switchBackground`) - Entrée **in** (Flux) — c'est ici que le bloc s'enfile, avant la réplique à habiller. - Entrée **fond** — reçoit la sortie **image de fond** du bloc précédent. C'est le seul point qui accepte le type « Image de fond » complet (couleur, répétition, position compris) ; y brancher directement une simple Image sans passer par Image de fond revient au même problème que le bloc hérité **Scène** décrit dans *Les blocs hérités* : les champs attendus (taille, couleur, répétition) sont absents, et le rendu reste vide ou incohérent. - Entrées **durée**, **effet d'entrée**, **effet de sortie**, **texte**, **position du texte** — l'animation de transition et un texte optionnel affiché par-dessus. - Sortie **out** (Flux) — la suite du fil. --- ## 📐 « Couvrir » n'étire pas ce que vous croyez Le réglage **Couvrir** du bloc Image de fond ne produit pas un `background-size: cover` classique — celui qui remplit tout le cadre en rognant ce qui dépasse. Il produit, vérifié dans le code du lecteur, un **`background-size: 100% auto`** : - la **largeur** de l'image est toujours calée sur la largeur du cadre ; - la **hauteur** suit ensuite, proportionnellement à cette largeur, selon les proportions propres de l'image — sans distorsion de l'image elle-même. Le résultat dépend donc du format de votre image par rapport au cadre : - une image plus **large** que haute, dans un cadre plus **haut** que large (un écran de smartphone), laisse apparaître la couleur de fond en haut et en bas ; - une image plus **haute** que large, dans un cadre large, déborde verticalement du cadre — la partie en trop est simplement masquée, pas redimensionnée. Il n'y a donc pas d'étirement de l'image au sens propre (aucune déformation), mais le cadre n'est pas nécessairement couvert. Si vous avez besoin d'un vrai recadrage plein cadre, un bloc **CSS** posant `background-size: cover !important` sur le décor reste, à ce jour, la seule solution — voir *Mettre en forme sans écrire de CSS* pour savoir si un réglage natif du module ne fait pas déjà l'affaire avant d'en arriver là. --- ## 🌐 Une image depuis une URL externe : ce qui se passe vraiment Rien n'est téléversé dans le projet : le bloc **Charger image** se contente d'emballer l'URL saisie dans une valeur « Image ». Aucun des trois blocs de la chaîne n'attend, avant de continuer, que l'image ait effectivement fini de charger — contrairement au bloc **Jouer musique**, qui lui bloque le fil tant que le son n'a pas démarré. Concrètement : - le fil continue immédiatement, l'image se charge en arrière-plan comme n'importe quelle image de page web ; - si l'URL est injoignable, mal formée, ou refusée par le site distant (protection anti-hotlink, CORS), le décor n'apparaît simplement pas — le fond retombe sur la **couleur** réglée dans Image de fond, sans erreur ni blocage ; - **rien ne vous avertit** de cet échec pendant le test : le seul moyen de le voir est d'ouvrir *Tester en jouant* et de regarder le décor, pas seulement la validation. Choisissez donc des URL stables (Wikimedia Commons, par exemple, sert des URL directes conçues pour l'usage externe) plutôt qu'un lien copié depuis un site qui pourrait un jour bloquer les requêtes venant d'ailleurs que de lui-même. --- → Prochaine étape : si un décor déjà branché selon cette chaîne reste invisible malgré tout, relisez *Les blocs hérités* — vous avez peut-être posé **Scène** au lieu de **Fond**.