I’m working on a React + TypeScript (tsx) app and I’ve implemented a modal component.

Normally, modals have a semi-transparent gray backdrop. Instead, I want to show a background image behind the modal, similar to how Jira displays a blurred or custom background when certain dialogs are open.

Conceptually:

• Modal content stays centered and above everything

• Instead of a gray overlay, I want a custom image behind the modal

• The background image should only appear when the modal is open

I tried adding an behind the modal and controlling it with z-index and positioning, but the code became messy very quickly (extra wrappers, positioning hacks, etc.). I’m wondering if there’s a clean, idiomatic way to structure this in React.