Set an image saved locally as background with Tailwind in a NextJS project
Sarthak 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