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;
Try this
backgroundImage: `url(${netflixLogo})`,