Renaming the background component as layer.

background-move/src/components/layer.tsx

@@ -1,8 +1,8 @@
 import react from 'react';
 
-import '../theme/background.css';
+import '../theme/layer.css';
 
-const Background: react.FC<{
+const Layer: react.FC<{
   shift: { x: number; y: number };
   zoom: number;
   children?: JSX.Element;
@@ -28,4 +28,4 @@ const Background: react.FC<{
   );
 };
 
-export default Background;
+export default Layer;

background-move/src/components/viewport.tsx

@@ -2,7 +2,7 @@ import react, { useCallback, useState } from 'react';
 
 import _ from 'lodash';
 
-import Background from './background';
+import Layer from './layer';
 
 import '../theme/viewport.css';
 
@@ -221,9 +221,9 @@ const Viewport: react.FC<{}> = (props: {}) => {
       onTouchEnd={touchEndHandler}
       onTouchCancel={mouseLeaveHandler}
     >
-      <Background shift={shift} zoom={zoom}>
+      <Layer shift={shift} zoom={zoom}>
         <img src='/assets/background.jpg' alt='' />
-      </Background>
+      </Layer>
     </div>
   );
 };