How to place this svg as my background footer with Tailwind?
Guys i dont know how to do this. I want my footer exactly like this but i have it fixed on the screen. So if i scroll up it follows me. Here is the Footer component where i think only the "relative z-50 bg-footer" classes are relevant:
"use client";import Link from "next/link";import { FaGithubSquare, FaLinkedin } from "react-icons/fa";import { HiHandThumbUp } from "react-icons/hi2";const Footer = () => { return ( <div className="relative z-50 bg-footer w-full flex flex-col md:flex-row items-center justify-between gap-4 p-4 text-dark-text dark:text-light-text "> <p>Website made by Me</p> <p className="flex flex-col items-center justify-center text-center"> All art displayed here has been stolen{" "} <HiHandThumbUp className="text-3xl" />{" "} </p> <div> <p>Where to find me</p> <div className="flex gap-4 items-center justify-center"> <Link href="https://github.com/" target="_blank"> <FaGithubSquare className="text-3xl" /> </Link> <Link href="https://www.linkedin.com/"> <FaLinkedin className="text-3xl" /> </Link> </div> </div> </div> );};export default Footer;
"use client";import Link from "next/link";import { FaGithubSquare, FaLinkedin } from "react-icons/fa";import { HiHandThumbUp } from "react-icons/hi2";const Footer = () => { return ( <div className="relative z-50 bg-footer w-full flex flex-col md:flex-row items-center justify-between gap-4 p-4 text-dark-text dark:text-light-text "> <p>Website made by Me</p> <p className="flex flex-col items-center justify-center text-center"> All art displayed here has been stolen{" "} <HiHandThumbUp className="text-3xl" />{" "} </p> <div> <p>Where to find me</p> <div className="flex gap-4 items-center justify-center"> <Link href="https://github.com/" target="_blank"> <FaGithubSquare className="text-3xl" /> </Link> <Link href="https://www.linkedin.com/"> <FaLinkedin className="text-3xl" /> </Link> </div> </div> </div> );};export default Footer;
Here is the bg-footer class i'm building:
.bg-footer{ @apply /* dark:bg-light-background */ after:bg-[url('../public/assets/svg/layered-waves-haikei.svg')] after:dark:bg-[url('../public/assets/svg/layered-waves-haikei-light.svg')] after:content-[""]after:fixed /*it stays fixed on the screen*/after:bottom-0 after:left-0after:w-full after:h-fullafter:-z-10after:bg-cover after:bg-center after:bg-no-repeat}
.bg-footer{ @apply /* dark:bg-light-background */ after:bg-[url('../public/assets/svg/layered-waves-haikei.svg')] after:dark:bg-[url('../public/assets/svg/layered-waves-haikei-light.svg')] after:content-[""]after:fixed /*it stays fixed on the screen*/after:bottom-0 after:left-0after:w-full after:h-fullafter:-z-10after:bg-cover after:bg-center after:bg-no-repeat}