enter image description hereI have a svg image in a React component that keeps trying to preserve the aspect ratio whenever browser aspect ratio changes. I'm trying to have it serve as a background image for a landing page that covers the entire screen. Here is some of the svg component:

const LandingPage = (props) => (
   <svg
      viewBox='0 0 2560 1440'
      xmlns='http://www.w3.org/2000/svg'
      xmlnsXlink='http://www.w3.org/1999/xlink'
      preserveAspectRatio='none' 
      xmlSpace='preserve'
      style={{
         fillRule: 'evenodd',
         clipRule: 'evenodd',
         strokeLinecap: 'round',
         strokeLinejoin: 'round',
         strokeMiterlimit: 1.5,
      }}
      {...props}
   >

And the JSX:

        <div className='curtain_cover'>
               <LandingPage />
            </div>
            <div className='main_content'>
               <Sidebar />
               <Box>

And some of the CSS:

.curtain_cover {
   display: block;
   width: 100%;
   height: 100%;
   float: left;
   position: relative;
   z-index: 2;
   transition: all 1s ease-out;
}

To better clarify the problem, I would like the image to resize so that it covers the entire screen no matter the browser size. Right now, it seems to just maintain its aspect ratio. Here is an image to show what I mean:

The grey portion under the image should be hidden by the entire image, but I cannot seem to get it cover the entire screen.