React:js: How can i add background Image to a stack or div?-CodePudding

For design, I'm using Chakra UI. I want to put a background image to this div, but I'm not sure how to do it.

 import React from 'react';
    import { Stack, Heading, Image, Button } from '@chakra-ui/react';
    import netflixLogo from '../../assets/images/netflixLogo.png';
    const SignUp = () => {
      return (
        <Stack>
          <div
            style={{
              width: '100%',
              height: '100%',
              backgroundImage: `url('../../assets/images/netflixLogo.png')`,
              backgroundPosition: 'center',
            }}
          >
            <Stack width={'full'} justifyContent={'space-between'} direction={'row'} px={'2.5rem'} >
              <Image height={'80px'} width={'200px'} src={netflixLogo} />
              <Button width={'80px'} >Sign In</Button>
            </Stack>
          </div>
        </Stack>
      );
    };
    
    export default SignUp;

CodePudding user response：

Try this

backgroundImage: `url(${netflixLogo})`,