How do I use an imported image as a Tailwind or CSS Background image?

[midnight blaze]

I've tried the following but it doesn't work:

`import bg from "~/assets/images/image.jpg";

<style define:vars={bg-url: bg}>
.hero {
background-image: url(var(--bg-url));
}
</style>`

[trim forge]

You can't use a variable inside url(), the variable has to include the url like: --var: url('/path')

You can try this instead: ```jsx

import bg from "~/assets/images/image.jpg";

<style define:vars={bg-url: url(${bg}}}>
.hero {
background-image: var(--bg-url);
}
</style>

[midnight blaze]

This didn't work either. If it's easier, is there a way to use a prop/variable as a background image in an inline style tag?

I've tried this but it's still not working..

<div class="hero" style="background-image: url(${bg});">

[trim forge]

ya you could try ```
style={background-image: url(${bg});}

[midnight blaze]

oo it worked!

[trim forge]

This also might not be working because images in the /src folder are bundled and renamed, you could try moving your image to the /public folder Nvm

[midnight blaze]

thank you

I'm actually passing the data from the template