From a6eff7823a618abdaa6baa20137ac504cdd25d7b Mon Sep 17 00:00:00 2001
From: Vignesh Mohankumar <vignesh@vigneshmohankumar.com>
Date: Sun, 11 Dec 2022 17:37:50 -0500
Subject: [PATCH] fix: make background header a background-image (#5635)

* fix: make background header a background-image

* fit differently
---
 src/pages/About/index.tsx | 15 +++++----------
 1 file changed, 5 insertions(+), 10 deletions(-)

diff --git a/src/pages/About/index.tsx b/src/pages/About/index.tsx
index c8a0cb5db6..4ef7d8b7ac 100644
--- a/src/pages/About/index.tsx
+++ b/src/pages/About/index.tsx
@@ -12,7 +12,7 @@ import backgroundImgSrc from './images/background.jpg'
 import Step from './Step'
 import { SubTitle, Title } from './Title'
 
-const Page = styled.div<{ isDarkMode: boolean; titleHeight: number }>`
+const Page = styled.div<{ isDarkMode: boolean; titleHeight: number; backgroundImgSrc: string }>`
   position: relative;
   width: 100%;
   align-self: center;
@@ -21,13 +21,9 @@ const Page = styled.div<{ isDarkMode: boolean; titleHeight: number }>`
   align-items: center;
   width: 100%;
   padding-top: calc(100vh - ${({ titleHeight }) => titleHeight + 200}px);
-`
-
-const BackgroundImage = styled.img`
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: calc(100vh - 72px);
+  background: url(${backgroundImgSrc});
+  background-size: auto 100vh;
+  background-repeat: no-repeat;
 `
 
 const Panels = styled.div`
@@ -166,8 +162,7 @@ export default function About() {
 
   return (
     <Trace page={PageName.ABOUT_PAGE} shouldLogImpression>
-      <Page isDarkMode={isDarkMode} titleHeight={titleHeight}>
-        <BackgroundImage src={backgroundImgSrc} />
+      <Page isDarkMode={isDarkMode} titleHeight={titleHeight} backgroundImgSrc={backgroundImgSrc}>
         <Content>
           <Title ref={titleRef} isDarkMode={isDarkMode}>
             Uniswap is the leading on-chain marketplace for tokens and NFTs.