In Chakra UI how to build a divider that uses a background image?

Question

In Styled Components to build a div separator that implements an image background I've used:

const Separator = styled.div`
  margin-bottom: ${({ theme }) => theme.spacings.normal};
  mask-image: url('data:image/svg+xml,code');
  background-color: ${({ theme }) => theme.primary};
  height: ${({ theme }) => theme.spacings.small};
  background-repeat: repeat-x;
`

but when looking at Chakra's Divider I'm not seeing a way to use a background image as the divider and this approach did not work:

<Divider
  backgroundRepeat="repeat-x"
  height="1rem"
  opacity="1"
  backgroundImage={`url('data:image/svg+xml,code')`}
/>

Research

• How to add the gradient to Chakra UI Progress?
• How to change the background color of the Chakra UI Progress component?
• React Create a Horizontal Divider with Text In between
• Chakra UI Image component not recognizing image path

In Chakra what is the correct approach to building a div separator that uses a background image?

Answer 1

Was able to figure out how with adding sx prop:

Because Divider has an added opacity and border wrote the divider as:

<Divider
  opacity="1"
  border="none"
  mb="5"
  sx={{
    bgRepeat: 'repeat-x',
    height: 2,
    bgColor: 'color2.600',
    bgPosition: '25% 75%',
    maskImage: `url(
      'data:image/svg+xml,code'
    )`,
  }}
/>

but when looking at Background props bgPosition doesn't seem to work in the scenario with sx.