Kevin Powell - CommunityKP-C
Kevin Powell - Community•3y ago•
12 replies
tree

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;

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-0
after:w-full after:h-full

after:-z-10
after:bg-cover
 after:bg-center
 after:bg-no-repeat
 
}

if i change it to absolute it just disappears.
I tried to follow this from css-tricks but i failed miserably https://css-tricks.com/lodge/svg/06-using-svg-svg-background-image/
image.png
CSS-TricksChris Coyier
06: Using SVG - SVG as background-image | CSS-Tricks
SVG images can be used as background-image in CSS as well, just like PNG, JPG, or GIF.
06: Using SVG - SVG as background-image | CSS-Tricks
Was this page helpful?