Unable to use background image

[slackermorris]

Hi all,

// running versions
"tailwindcss": "^3.0.23",

I'm at a complete loss. I am trying to include an image as a background image and have tried a variety of approaches to no avail. I have tried:

• Customising the Tailwind theme to refer to my own background image.

// tailwind.config.js
backgroundImage: {
      "image-of-banana": "url('../public/image-of-banana.png')",
},

• Using inline arbitrary values to refer to the same image.

// app/routes/bananaPage
<div className="... bg-[url('../../public/image-of-banana.png')] bg-cover bg-center bg-no-repeat ..." />

Nothing works. I get a 404 Not Found, for the image. With the request URL requesting http://localhost:3000/public/image-of-banana.png.

Strangely, requesting the same image via the <img/> src tag does work. I will also note that I haven't resorted to declaring a custom class at the level of my entry .css file because I am hoping that Tailwind and what it purports to offer in this space will take care of my needs 😅.

Could someone please help me to find the error in my ways? Thanks for all the help.

References

• Exactly the same issue. Unfortunately I don't understand the solution.
• Same issue. Solutions don't help me.
• Ditto as above.
• Ditto as above.
• Ditto as above.
• Ditto as above.
• Ditto as above.
• Ditto as above. And why should we have to use a style tag anyway?

[wongjn]

Consider matching the path inside the url() with the working src value of the <img> element.

[adamwathan]

Make sure the URL matches the actual URL where the image is being served from, not the path to the image on your local machine. Usually the public directory is just served from root on your server, so my guess is the right path is just url(‘/image-of-banana.ping’) or maybe url(‘/public/img-of-banana.png’).

If you are going to ever use relative URLs (I would recommend against it), they should be relative to where the compiled CSS file lives, not relative to your template file.

[iqbalpa]

thank you very much

[mrdulin]

This should be added to the docs.