From 04c2c12117abb149dc1973b219b98062fec51e44 Mon Sep 17 00:00:00 2001
From: evlist <vdv@dyomedea.com>
Date: Wed, 7 Sep 2022 21:44:59 +0200
Subject: [PATCH] Adding a shift property.

---
 background-move/src/App.tsx                   |  3 +--
 background-move/src/components/background.tsx | 13 ++++++++++---
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/background-move/src/App.tsx b/background-move/src/App.tsx
index 53b90a3..8187be5 100644
--- a/background-move/src/App.tsx
+++ b/background-move/src/App.tsx
@@ -19,14 +19,13 @@ import '@ionic/react/css/display.css';
 /* Theme variables */
 import './theme/variables.css';
 
-
 import Background from './components/background';
 
 setupIonicReact();
 
 const App: React.FC = () => (
   <IonApp>
-    <Background />
+    <Background shift={{ x: 1000, y: 1000 }} />
   </IonApp>
 );
 
diff --git a/background-move/src/components/background.tsx b/background-move/src/components/background.tsx
index 5fc36a4..20ec794 100644
--- a/background-move/src/components/background.tsx
+++ b/background-move/src/components/background.tsx
@@ -2,10 +2,17 @@ import react from 'react';
 
 import '../theme/background.css';
 
-const Background: react.FC = () => {
+const Background: react.FC<{ shift: { x: number; y: number } }> = (props: {
+  shift: { x: number; y: number };
+}) => {
   return (
-    <div className='background'>
-      <img src='/assets/background.jpg' />
+    <div
+      className='background'
+      style={{
+        transform: `translate(${-props.shift.x}px, ${-props.shift.y}px)`,
+      }}
+    >
+      <img src='/assets/background.jpg' alt='' />
     </div>
   );
 };