Donnez un arrière-plan à n’importe quel écran depuis la section Fill des Screen settings :

• Arrière-plan sur une seule couche : une couleur, un dégradé, une image ou une vidéo.
• Arrière-plan multi-couches : par exemple, une image avec une teinte.

Si vous ajoutez un thème sombre et appliquez un style réutilisable, vous pouvez définir des arrière-plans différents pour le thème clair et le thème sombre.

Image

Importez un fichier .JPG, .PNG ou .WEBP de 20 Mo maximum. L’image s’adapte pour couvrir tout l’arrière-plan.

Pour remplacer l’image d’arrière-plan au moment de l’exécution depuis le code de votre application, activez un identifiant de média personnalisé.

Vidéo

Importez un fichier .MP4 ou .WEBM de 50 Mo maximum. L’aperçu affiche une image fixe, mais la vidéo est lue sur l’appareil à l’exécution.

Activez Loop pour rejouer la vidéo en boucle.

Pour changer la vidéo d’arrière-plan à l’exécution, activez un identifiant média personnalisé.

Couleur unie

Saisissez une valeur hexadécimale à six chiffres, par exemple #FFFFFF, et définissez l’opacité de 0 à 100 %. Une valeur raccourcie bloque la publication.

Dégradé

Créez un dégradé linéaire à plusieurs arrêts :

• Direction — faites pivoter le dégradé de 0 à 360°.
• Stops — pour repositionner un stop, faites-le glisser le long de la barre. Pour en ajouter un, cliquez sur la barre ou sur à côté de Stops. Pour modifier la position, la valeur hexadécimale à six chiffres ou l’opacité d’un stop, modifiez sa ligne.
• Opacity — le curseur sur la ligne du calque ajuste tous les stops simultanément, préservant ainsi le fondu entre eux.

Utiliser un arrière-plan comme image hero

Dans les flows, vous créez une image hero à partir d’un arrière-plan d’écran et d’un Sliding sheet. Le sheet couvre la partie inférieure de l’écran et remonte par-dessus l’arrière-plan au fil du défilement.

1. Définissez le Fill de l’écran sur Image ou Video, et téléchargez l’image hero.

   

2. Ouvrez le panneau Add element et sélectionnez Layout > Sliding sheet.

3. Définissez la Start position de la feuille — la part de l’écran qu’elle couvre, mesurée depuis le bas. Avec la valeur par défaut de 55 %, le fond est visible dans les 45 % supérieurs.

   

4. Ajoutez votre contenu à l’intérieur du sheet.

5. Pour superposer un titre ou un logo sur l’image hero, ajoutez ces éléments en dehors du sheet. Ils s’affichent par-dessus l’arrière-plan de l’écran.

6. Modifiez la Start position pour redimensionner le sheet si nécessaire. Vous ne pouvez pas définir une hauteur absolue pour cet élément.

Teinter un arrière-plan

Le texte superposé à une image ou une vidéo n’est lisible que là où le média en dessous est suffisamment sombre. Pour uniformiser cette surface, empilez une couche semi-transparente sur le média :

1. Dans Screen settings, définissez le calque Fill sur votre image ou vidéo.
2. Pour ajouter un second calque, cliquez sur à côté de Fill. Le nouveau calque apparaît en haut de la section Fill et recouvre le média.
3. Cliquez sur l’échantillon du calque et sélectionnez Gradient . Pour assombrir uniquement le bord qui porte votre texte, faites passer le dégradé d’un arrêt opaque à ce bord à un arrêt transparent à l’autre extrémité.
4. Pour régler l’intensité de la teinte, faites glisser le curseur sur la ligne du calque.

Pour modifier l’ordre des calques, faites glisser leurs lignes. Pour supprimer un calque, cliquez sur dans sa ligne.

Afficher un arrière-plan différent en mode sombre

Pour afficher un arrière-plan différent en mode sombre :

1. Si le flow n’a pas de thème sombre, ajoutez-le.
2. Enregistrez le calque d’arrière-plan en tant que style de couleur.
3. Si l’arrière-plan a une teinte, enregistrez également le calque de teinte en tant que style de couleur.
4. Modifiez la valeur sombre de chaque style.