How to use background image with tailwind in next.js?-CodePudding

I have a background image in the public folder named bg.png

In the index.js page of the pages folder I want to use that image as a background image

I have install tailwind following the documentation of their official website.

I have already tried this, but it doesn't work.

import BG from "../public/bg.png";

return (
  <div
    className="bg-scroll"
    style={{
      backgroundImage: `url(${BG})`,
      height: "972px",
    }}
  >
  </div>
)

It doesn't show the image.

CodePudding user response：

When you have assets in a public folder no need to define all the exact path.

  <div
   className="bg-scroll"
   style={{
    backgroundImage: `url('/bg.png')`,
     height: "972px",
    }}
  >
</div>

CodePudding user response：

Here is how you can do it all with Tailwind. You don't need to import the image either.

return (
  <div
    className="bg-scroll bg-[url('/bg.png')] h-[972px]"
  >
  </div>
)