I am working on an MDX blog where I render 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 component MDXLayoutRenderer is responsible for inserting the MDX content into the page.
index.mdx
This is the title
import { Splatter } from '../../components/Splatter.tsx'
This is a block of text with some random content...
<Splatter />
Another block of text with more gibberish...
components/Splatter.tsx
export const Splatter = () => (
<div className="relative inset-0 h-64 w-64 bg-[url('/splatter.jpg')]">
</div>
)
public/splatter.jpg
In my project, I have encountered an issue where the image overlapped the text in index.mdx or behaved like a regular div, pushing down the content that followed it.
My goal is to set the splatter image as a background rather than a foreground element.
I have tried using an img tag and setting background properties in Tailwind CSS, but neither approach worked for me. I also experimented with z-index and different positioning attributes without success.
Can someone suggest a solution to this problem?