Wrap the login page background image in a new container to fix it moving

src/pages/signin/SignInPageLayout/index.js

@@ -98,6 +98,8 @@ function SignInPageLayout(props) {
 
     const scrollViewStyles = useMemo(() => scrollViewContentContainerStyles(styles), [styles]);
 
+    const backgroundImageHeight = Math.max(variables.signInContentMinHeight, containerHeight);
+
     return (
         <View style={containerStyles}>
             {!props.shouldShowSmallScreen ? (
@@ -163,13 +165,15 @@ function SignInPageLayout(props) {
                     keyboardShouldPersistTaps="handled"
                     ref={scrollViewRef}
                 >
-                    <View style={[styles.flex1, styles.flexColumn, styles.overflowHidden, StyleUtils.getMinimumHeight(Math.max(variables.signInContentMinHeight, containerHeight))]}>
-                        <BackgroundImage
-                            isSmallScreen
-                            pointerEvents="none"
-                            width={variables.signInHeroBackgroundWidthMobile}
-                            transitionDuration={CONST.BACKGROUND_IMAGE_TRANSITION_DURATION}
-                        />
+                    <View style={[styles.flex1, styles.flexColumn, styles.overflowHidden, StyleUtils.getMinimumHeight(backgroundImageHeight), StyleUtils.getSignInBgStyles(theme)]}>
+                        <View style={[styles.pAbsolute, styles.w100, StyleUtils.getHeight(backgroundImageHeight), StyleUtils.getBackgroundColorStyle(theme.highlightBG)]}>
+                            <BackgroundImage
+                                isSmallScreen
+                                pointerEvents="none"
+                                width={variables.signInHeroBackgroundWidthMobile}
+                                transitionDuration={CONST.BACKGROUND_IMAGE_TRANSITION_DURATION}
+                            />
+                        </View>
                         <SignInPageContent
                             welcomeHeader={props.welcomeHeader}
                             welcomeText={props.welcomeText}

src/styles/utils/getSignInBgStyles/index.ios.ts

@@ -0,0 +1,7 @@
+import type GetSignInBgStyles from './types';
+
+const getSignInBgStyles: GetSignInBgStyles = (theme) => ({
+    backgroundColor: theme.signInPage,
+});
+
+export default getSignInBgStyles;

src/styles/utils/getSignInBgStyles/index.ts

@@ -0,0 +1,5 @@
+import type GetSignInBgStyles from './types';
+
+const getSignInBgStyles: GetSignInBgStyles = () => ({});
+
+export default getSignInBgStyles;

src/styles/utils/getSignInBgStyles/types.ts

@@ -0,0 +1,6 @@
+import type {ViewStyle} from 'react-native';
+import type {ThemeColors} from '@styles/theme/types';
+
+type GetSignInBgStyles = (theme: ThemeColors) => ViewStyle;
+
+export default GetSignInBgStyles;

src/styles/utils/index.ts

@@ -22,6 +22,7 @@ import createReportActionContextMenuStyleUtils from './generators/ReportActionCo
 import createTooltipStyleUtils from './generators/TooltipStyleUtils';
 import getContextMenuItemStyles from './getContextMenuItemStyles';
 import getNavigationModalCardStyle from './getNavigationModalCardStyles';
+import getSignInBgStyles from './getSignInBgStyles';
 import {compactContentContainerStyles} from './optionRowStyles';
 import positioning from './positioning';
 import type {
@@ -1084,6 +1085,7 @@ const staticStyleUtils = {
     getCardStyles,
     getOpacityStyle,
     getMultiGestureCanvasContainerStyle,
+    getSignInBgStyles,
 };
 
 const createStyleUtils = (theme: ThemeColors, styles: ThemeStyles) => ({