Background with image

Is there any way to use an image as background? I have tried to use a container with position absolute and z-index to make other elements on top, but it didn’t worked.

Does anyone has a solution for it?

Tks!

You mean a static background for the whole page with everything else scrolling on top of it?

I made a short video to show you how to achieve this (we plan on making this part quite a bit smoother, but it gets you there and also shows a bit how Scroll View works), check it out:

3 Likes

Can you create a written version of this? I can’t see what you select when on the “padding” section because it goes off the top of the screen. For some reason background images are just a click away on some pages and are complicated like this on other pages of my app.

He’s selecting Component default value there just to remove all padding from the page to make the image stretch to cover the whole page.

Background images should work with this setup on all pages, just make sure that the image height is set properly as in the video (systemVars.dimensions.viewport.height) and the other content is in the Scroll view and page style really has Stretch to the viewport height and Disable scroll selected.

Hi Harri,

Thank you for this video. So i was able to get this to work but i noticed that when i open the page with the image background, it takes like 10 or more seconds before the image loads up. Is there a way to make sure that the image loads together with other things on the page when it is opened?

Thank you