Animate background image independent of the foreground


I’m trying to animate the scaleX and scaleY of a background image but leave the foreground controls unaffected as shown in this video:

Unfortunately, it appears the XML used in the video doesn’t work. If I use something like in the video:

<GridLayout id="outerWrapper">
		<GridLayout id="background" scaleX="1.6" scaleY="1.6"></GridLayout>
		<StackLayout id="loginButtonForm">
			<Button text="Login" id="showMainContent" tap="onTapLoginButton" />

The background image appears and animates correctly but the login button doesn’t appear. I’m guessing it’s below the GridLayout with the background image. If I make the GridLayout with the background image as the outer wrapper, the login button is animated as well. Is it possible to do this?



Here’s the code for that example:

It looks like the container positioning might be getting done in the css.