background-snippets icon indicating copy to clipboard operation
background-snippets copied to clipboard

Copied code didn't work on the last background example.

Open josecobi opened this issue 7 months ago • 1 comments

I love your backgrounds. Great job! However, I could not get the last background to work on my website till I placed it inside another div and added z-index. It was showing on top of my header.

Original code copied from the website:

<div class="relative h-full w-full bg-slate-950"><div class="absolute bottom-0 left-0 right-0 top-0 bg-[linear-gradient(to_right,#4f4f4f2e_1px,transparent_1px),linear-gradient(to_bottom,#4f4f4f2e_1px,transparent_1px)] bg-[size:14px_24px] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_100%)]">
</div>
</div>

Working code I copied from the preview using dev tools:

<div class="fixed left-0 top-0 -z-10 h-full w-full">
			<div class="relative h-full w-full bg-slate-950">
				<div class="absolute bottom-0 left-0 right-0 top-0 bg-[linear-gradient(to_right,#4f4f4f2e_1px,transparent_1px),linear-gradient(to_bottom,#4f4f4f2e_1px,transparent_1px)] bg-[size:14px_24px] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_100%)]">
					
				</div>
			</div>
		</div>

I tried another one and didn't need any adjustments. but I didn't check all of them.

josecobi avatar Jul 16 '24 18:07 josecobi