htmlnuxt.js

Nuxt3 background-image doesn't show up

I am working on a nuxt3 project and want to use an image as the background, but I am stuck with the problem of it not showing up on my screen.

I placed my image as documented in Nuxt3.

So I tried:

<template>
    <div class="custom-background-image">
    </div>
</template>

<script setup>

</script>

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

But there is no image showing up on my screen. Did someone ecountered the same problem?

Solution

  • If you store your images inside the assets folder. You can do it like this in your CSS.

    ~/assets/images/background.png 

    .custom-background-image {
    background-image: url('~/assets/images/background.png');
}

    But if you store your images file in a static or public folder, you can call the background image like this.

    ~/public/assets/images/background-image.jpg

    .custom-background-image {
    background-image: url('/assets/images/background-image.jpg');
}

    Tested and it works.

    PS: you need to add height on your .custom-background-image class to show the background image. e.g height:100vh;