Height problem for mobile web application


I want to create a web application specifically for mobile, on the index page properties I changed preset page width to mobile with width: 380 & height: 670

it appears fine on the UI Builder

but when I Preview the page for testing, the background image stretches all the way from the top of the page to the bottom

what is exactly the problem?

Also, is it possible to change the background image for the page depending on the time of the day, for example, 6 am to 8 pm bright background & 8 pm to 6 am dark background, if yes, how so?



You have set the background image of the page itself.

When you do this, the background image will stretch to fill the page.

If you want to have a ‘background image’ that does not stretch to fill the page, you have to create a group that has your desired dimensions, set the background image of this group to your desired background image, and ‘arrange’ this group behind all other elements on your page. (by doing arrange-> send to back)

Set the background of the page itself to ‘none’

The background image can be changed based on conditions. You do that in the ‘conditions’ tab on whatever group is acting as your background. I am not sure, however, if you can make conditions based on time of day natively within Bubble.