Full-screen background

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 and Disable scroll 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. (Due to a known issue, the view canvas won't show the container height correctly, but you can circumvent this by setting an explicit minimum height value)

  4. Inside the container, add a Scroll View, and set its height to the same formula

  5. Add your scrollable content inside the scroll view

What we're aiming for

Check the tutorial video below for the full walkthrough!