I have a modal window mui, the window has a visible part (white) and a gray part, when you click on the gray part, the modal window closes, I have text in the window and there is a picture, I need the picture to be partly on a white background, and partly on a gray one and for it to be above all others in the z index property

import lama1 from '../../../assets/lama1.svg';

const browserList = ['Chrome', 'Microsoft Edge'];
const WrongBrowserModal = ({ isOpenDialog, setIsOpenDialog }: WrongBrowserModalProps) => {
    const handleClose = () => setIsOpenDialog(false);
    return (
        <Dialog maxWidth='lg' onClose={handleClose} open={isOpenDialog}>
            <DialogTitleStyled borderBottom='1px solid Other.Divider'>
                <Typography variant='h6' color='text.primary'>
                    Title
                </Typography>
            </DialogTitleStyled>
            <Box display='flex' width='960px'>
                <DialogContentStyled>
                    <Box maxWidth='640px'>
                        <Typography variant='body1'>
                           texttexttexttexttexttexttexttexttext
                        </Typography>
                    </Box>
                    <Box position='absolute' right={0} top={-84} zIndex={10000}>
                        <img src={lama1} alt='lama1' />
                    </Box>
                </DialogContentStyled>
            </Box>
        </Dialog>
    );
};

I tried this, but its not working

const DialogWithBackgroundImage = styled(Dialog)(({ theme }) => ({
  '& .MuiDialog-paper': {
    '&::before': {
      content: `url(${yourImage})`,
      display: 'block',
      width: '100%',
      height: '100%',
      backgroundSize: 'cover',
      backgroundRepeat: 'no-repeat',
      position: 'absolute',
      top: 0,
      left: 0,
    },
  },
}));