Using an asset as CSS background-image in nuxt

the only way I got it working was too set the asset in a style block and load it that way

I was trying out a few things for this website in nuxt, but it was hard for me to get the asset inline. That I why I did it this way, its not perfect but it works. In your component/page add this:


<style>
    .custom-background-image {
        background-image: url(~/assets/images/bg.jpg);
    }
</style>

After that, just add the class to the correct html element / div for instance


<div class="custom-background-image">
Content of the div here
</div>

Created by Daniel on 11/22/2024

Copyright © DanielKnows.com 2019 - 2024 - Built with NuxtJS

Subscribe for Tech Tips!

Stay updated with the latest tech insights and tips. Subscribe now!

{}