how do i put a splatter image in between mdx content like a mdx blog?

i have an mdx blog that renders a blog post.

pages/index.tsx

<main className="flex min-h-screen dark:bg-black">
                <div className="wrapper mb-24 gap-8 px-8 lg:grid lg:grid-cols-[1fr,70px,min(70ch,calc(100%-64px)),70px,1fr]">
                    <div className="mdx-wrapper prose relative col-[2/5] max-w-full dark:prose-light lg:grid lg:grid-cols-[70px_1fr_70px]">
                        <MDXLayoutRenderer mdxSource={props.code as never} />
                    </div>
                </div>
            </main>

the MDXLayoutRenderer is where the mdx is inserted in the page.

index.mdx

this is a title

import { Splatter } from '../../components/Splatter.tsx'

this is a block

some giberrish

some giberrish

some giberrish

some giberrish

<Splatter />

yet another block

some giberrish

some giberrish

some giberrish

some giberrish

components/Splatter.tsx

export const Splatter = () => (
    <div className="relative inset-0 h-64 w-64 bg-[url('/splatter.jpg')]">
    </div>
)

public/splatter.jpg

---

for some reason, the splatter either overlaps the text in index.mdx or it acts like a div, i.e, it pushes down the yet another block

i want the splatter to be in the background like a background image.

i'm not sure how to do it? i did try using an img but it didn't give the desired result.

my current method of bg-[url('/splatter.jpg')] is just a background image in tailwind. it doesn't work either.

i tried using z-index & different positions absolute & relative but it doesn't go in the background.

what's the fix to this?

You can try with two images, position them absolute with left and right with parent position relative and negative z-index.

Something like this:

export const Splatter = () => (
  <div className="relative -z-10">
    <div className="absolute bg-cover left-[100%] h-96 w-[500px] bg-[url('https://i.sstatic.net/J0ik2.jpg')]"></div>
    <div className="absolute bg-cover right-[100%] h-96 w-[500px] bg-[url('https://i.sstatic.net/J0ik2.jpg')]"></div>
  </div>
);

Play around with height and width to get what suits you. For smaller screen I think you should hide this.

Here is the codesandbox example.