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 😊