Set an image saved locally as background with Tailwind in a NextJS project

Sarthak BatraSarthak Batra
1 min read

Dear Diary,

Today, I acted like a total dumbfuck!

I just struggled 10 minutes to setup a locally saved image as a background in a NextJS component using tailwind.

I am writing this so that if you're in the same position, you don't get frustrated as I did.

      #Component where you want to add the image
      #Save the image in the nextjs public folder.

      <div
        className={`h-screen bg-no-repeat bg-cover`}
        style={{ backgroundImage: `url('/awesome-bg.png')` }}
      >
            Text inside the component
      </div>

Remember to refer back to this if you forget again, you dumbfuck!

0
Subscribe to my newsletter

Read articles from Sarthak Batra directly inside your inbox. Subscribe to the newsletter, and don't miss out.

Written by

Sarthak Batra
Sarthak Batra