Full screen background

Introduction

Composer allows you to build applications with custom background images, enabling endless design possibilities.

Image as a background

To set a full-screen background for your application:

1. In a page's Style tab, enable Stretch to the viewport height. Check Disable scrolling and Safe Area. Clear values for padding as well.

2. Add a Container component and give it a background image. The given container is now the main layout of your application. In the Layout tab, set the 'Width and Height' to be "Advanced". Bind the height and width to the following formulas accordingly:

systemVars.dimensions.viewport.height

systemVars.dimensions.viewport.width

Optionally, inside the container, add a Scroll View, and set its height and width to the same formulas. Add any components you want to make scrollable inside the scroll view

Outdated: Video

Check the tutorial video below for the full walkthrough! Note that the following video may not