The background component is now a container (and should probably be renamed overlay).

background-move/src/components/background.tsx

@@ -5,17 +5,25 @@ import '../theme/background.css';
 const Background: react.FC<{
   shift: { x: number; y: number };
   zoom: number;
-}> = (props: { shift: { x: number; y: number }; zoom: number }) => {
+  children?: JSX.Element;
-  console.log(`--- Rendering background, props: ${JSON.stringify(props)} ---`);
+}> = (props: {
+  shift: { x: number; y: number };
+  zoom: number;
+  children?: JSX.Element;
+}) => {
+  const {children: children, ...argProps} = props; 
+  console.log(`--- Rendering background, props: ${JSON.stringify(argProps)} ---`);
 
   return (
     <div
       className='background'
       style={{
-        transform: `translate(${-props.shift.x}px, ${-props.shift.y}px) scale(${props.zoom})`,
+        transform: `translate(${-props.shift.x}px, ${-props.shift.y}px) scale(${
+          props.zoom
+        })`,
       }}
     >
-      <img src='/assets/background.jpg' alt='' />
+      {props.children}
     </div>
   );
 };

background-move/src/components/viewport.tsx

@@ -221,7 +221,9 @@ const Viewport: react.FC<{}> = (props: {}) => {
       onTouchEnd={touchEndHandler}
       onTouchCancel={mouseLeaveHandler}
     >
-      <Background shift={shift} zoom={zoom}/>
+      <Background shift={shift} zoom={zoom}>
+        <img src='/assets/background.jpg' alt='' />
+      </Background>
     </div>
   );
 };

background-move/src/theme/background.css

@@ -5,7 +5,3 @@
   z-index: -1;
 }
 
-.background img {
-  width: 4032px;
-  height: 2268px;
-}

background-move/src/theme/viewport.css

@@ -2,4 +2,10 @@
     position: fixed;
     width: 100%;
     height: 100%;
-}
+}
+
+.background img {
+    width: 4032px;
+    height: 2268px;
+  }
+