fix(background image): cuts off at the bottom when scrolling

src/pages/App.tsx

@@ -49,25 +49,6 @@ const BodyWrapper = styled.div`
   z-index: 1;
 `
 
-const BackgroundGradient = styled.div`
-  width: 100%;
-  height: 170vh;
-  background: ${({ theme }) => `radial-gradient(50% 50% at 50% 50%, ${theme.primary1} 0%, ${theme.bg1} 100%)`};
-  position: absolute;
-  top: 0px;
-  left: 0px;
-  opacity: 0.1;
-  z-index: -1;
-
-  transform: translateY(-70vh);
-
-  @media (max-width: 960px) {
-    height: 300px;
-    width: 100%;
-    transform: translateY(-150px);
-  }
-`
-
 const Marginer = styled.div`
   margin-top: 5rem;
 `
@@ -109,7 +90,6 @@ export default function App() {
             <Marginer />
             <Footer />
           </BodyWrapper>
-          <BackgroundGradient />
         </AppWrapper>
       </Router>
     </Suspense>

src/theme/index.tsx

@@ -1,3 +1,4 @@
+import { transparentize } from 'polished'
 import React, { useMemo } from 'react'
 import styled, {
   ThemeProvider as StyledComponentsThemeProvider,
@@ -197,4 +198,15 @@ html {
   color: ${({ theme }) => theme.text1};
   background-color: ${({ theme }) => theme.bg2};
 }
+
+body {
+  min-height: 100vh;
+  background-position: 0 -30vh;
+  background-repeat: no-repeat;
+  background-image: ${({ theme }) =>
+    `radial-gradient(50% 50% at 50% 50%, ${transparentize(0.9, theme.primary1)} 0%, ${transparentize(
+      1,
+      theme.bg1
+    )} 100%)`};
+}
 `