Kevin Powell - Community•14mo ago

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

after:-z-10
after: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-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/

Chris Coyier

CSS-Tricks

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.

5 Replies

tree•14mo ago

If anyone can give me a different approach or examples from other sites i'd appreciate it

Kevin Powell•14mo ago

When you don't have it with position absolute, what's the problem? Like, what isn't working right now? Do you have an example anywhere so we could see it? I'm not sure if you can upload images, but https://play.tailwindcss.com/ lets you make a working example at least

Tailwind Play

An advanced online playground for Tailwind CSS that lets you use all of Tailwind's build-time features directly in the browser.

tree•14mo ago

https://f90d-92-190-178-175.ngrok-free.app/ I changed it to after:fixed so you can see how i'd like it to be of course that doesnt help at all

Kevin Powell•14mo ago

So position: absolute worked, the problem is the height: 100% gives it the height of the parent, so it only has a height of 86px, and we don't see anything. Because it's just decorative, you could give it a big height, like height: 100vh or something (the bigger the number, the more of the waves you'll see) and it should be fine. The issue is the left and right sides because it's inside something limiting the total size. I think the easiest is to remove the width: 100% and use left: -64px and right: -64px to pull it into that empty space. Of course, I'm not sure if that size changes at different screen sizes, so it might been some playing around with.

tree•14mo ago

🤔 i see that now Thanks i'll see what i can do but that was very helpful indeed :DD OK Now it works as i was aiming for finally haha i moved it outside the parent and it fixed the borders I marked this as Solved

Gaming

Programming

How to place this svg as my background footer with Tailwind?