Full screen background
  • 30 Jun 2022
  • 1 Minute to read
  • Dark
    Light
  • PDF

Full screen background

  • Dark
    Light
  • PDF

To set a full-screen background with the page content scrolling on top, there's a few things you need to do:

  1. Set the page layout to Stretch to the viewport height. Disable scroll and Safe Area under the Style tab
  2. Add a Container component, give it a background image and set its height to the viewport height system variable with the formula systemVars.dimensions.viewport.height
  3. Inside the container, add a Scroll View, and set its height to the same formula
  4. Add your scrollable content inside the scroll view

Final product

Video

Check the tutorial video below for the full walkthrough!

your title goes here

Following tutorial was created prior to the big 'Style' tab update, thus some UI elemets may appear outdated.


Was this article helpful?

What's Next