Articles on: Blocks Creator
This article is also available in:

🟦 Background image

🟦 Background image



The Background Image block allows you to dynamically modify the background of your application with customizable animation effects.


This block is ideal for creating fluid visual transitions between different settings or for adapting the graphic atmosphere according to the user context.


πŸ“₯ Entries


  • background (Image): The image to display in the background. It automatically adapts to the size of the screen in β€œcontain” mode and allows you to configure the background color, repetition (mosaic or single) and position.
  • duration (Number): Duration of the transition animation in seconds (default 0 for immediate change).
  • inEffect (Choice): Appearance effect of the new image (options: None, Zoom, Zoom out, Fade, Slide).
  • outEffect (Choice): Effect of disappearance of the old image.
  • text: Optional text to display over the background.
  • textPosition (Choice): Position of the text (Left, Right, Center - by default Right).


πŸ“€ Outings


  • out (Stream): Output flow to continue the course after the background change.


πŸ’‘ Example of use


Scenario: Change of atmosphere for a night scene


  1. The user completes a day sequence in a meditation app.
  2. The flow arrives on the Background Image block to prepare for the transition to night.
  3. The block is configured with:
  • An image of a starry sky in background
  • An inEffect in Fade and an outEffect in Sliding
  • A duration of 1.5 seconds
  • A text "Good night" in text positioned in Center
  1. The block applies the animated transition between the two backgrounds.
  2. The flow out directs to the night meditation sequence.


βš™οΈ Technical Details

  • Former name: Fond / Switch Background
  • Animation management: Effects are applied simultaneously to the old and new images for a smooth transition.
  • Compatibility: Works with all standard image formats (JPG, PNG, SVG) and adapts to different screen resolutions.

Updated on: 04/03/2026

Was this article helpful?

Share your feedback

Cancel

Thank you!