The background over the elements

[aman-a-dev]

First of all I have to say https://patterncraft.fun/ is cool 😎 👌 website bet when I copy and use it it overlaps my elements for example.

<div className="min-h-screen w-full bg-white relative">
  {/*  Diagonal Cross Center Fade Grid Background */}
  <div
    className="absolute inset-0"
    style={{
      backgroundImage: `
        linear-gradient(45deg, transparent 49%, #e5e7eb 49%, #e5e7eb 51%, transparent 51%),
        linear-gradient(-45deg, transparent 49%, #e5e7eb 49%, #e5e7eb 51%, transparent 51%)
      `,
      backgroundSize: "40px 40px",
         WebkitMaskImage:
            "radial-gradient(ellipse 60% 60% at 50% 50%, #000 30%, transparent 70%)",
          maskImage:
            "radial-gradient(ellipse 60% 60% at 50% 50%, #000 30%, transparent 70%)",
    }}
  />
  {/* Your Content/Components */}
</div>

When I ues this bg I put my contents in {/* Your Content/Components */} but the grid will be at the top and covers my elements I wish if you fix it

Thanks 😊

[Prakash1185]

Hey @aman-a-dev! 👋 I ran into the exact same problem. Here's what worked for me:

Just wrap your content in a div with relative and z-10 classes:

<div className="min-h-screen w-full bg-white relative">
  {/* Diagonal Cross Background */}
  <div
    className="absolute inset-0"
    style={{
      backgroundImage: `
        linear-gradient(45deg, transparent 49%, #e5e7eb 49%, #e5e7eb 51%, transparent 51%),
        linear-gradient(-45deg, transparent 49%, #e5e7eb 49%, #e5e7eb 51%, transparent 51%)
      `,
      backgroundSize: "40px 40px",
         WebkitMaskImage:
            "radial-gradient(ellipse 60% 60% at 50% 50%, #000 30%, transparent 70%)",
          maskImage:
            "radial-gradient(ellipse 60% 60% at 50% 50%, #000 30%, transparent 70%)",
    }}
  />
  {/* Your Content/Components */}
  <div className="relative z-10">  {/* This fixes it! */}
    <Navbar />
    <Hero />
    <Content />
  </div>
</div>

Hope it helps