Skip to content

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

@josecobi

Description

@josecobi

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions