backgroundImage path in tailwind.config.js

I have an image located in resources/images, being compiled to public_images, and would like to use it in a background as part of my TailwindCSS theme definition, but am having trouble determining what the path should be:

backgroundImage: {
  'hero-one': "url('/images/hero-one.jpg')",
  // /public/images
  // /resources/images
}

With frontend of <div class="bg-hero-one"> generates:

.bg-hero-one {
    background-image: url(http://example.test/images/hero-one.jpg);
}

But what I need, of course is to point to:

http://example.test/app/themes/my-theme/public/images/hero-one.jpg

What am I missing?

2 Likes

The background image actually ended up being there in production. Not sure why it wasn’t, locally.

For my needs, I wanted a transparent overlay and got a better result with the method from this 10 minute YouTube video.

<div class="-m-4 h-500 bg-gradient-to-tl from-purple-900 to-red-200">
  <img src="https://example.com/app/uploads/2022/05/Some.jpg" class="w-full h-full object-cover mix-blend-overlay absolute"/>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus non fringilla nisl. Curabitur ex turpis, pellentesque at viverra non, tempor ut turpis. Etiam id vehicula metus, eu porttitor magna. </p>
</div>