back

Back

Neon

svg

June 29, 2024

Neon - svg Background

How to implement:

With tailwind installed in your project tutorial, implement these tailwind classes in your parent div where it will reflect the background.

Download image here: Download
Resolution: (5824 × 3264)
Extension: .png

Code:

/public/neon.jpeg

export default function Home() {
    return (
      <section
        style={{
          backgroundImage: `url(neon.jpeg)`,
          backgroundSize: 'cover', 
          backgroundPosition: 'center',
          backgroundRepeat: 'no-repeat' 
        }}
        className="flex min-h-screen flex-col items-center justify-between p-24"
      >
        
         {page / component}
      </section>
    );
  }

View background:

Captura de tela de 2024-06-29 02-00-27

Note

If this background has served you in any way, consider following me on github or supporting me to continue working at BacksEasy.