I am using TailwindCSS in a Nuxt project and I am trying to add a background image to a header element. The tailwindCSS official docs solution for this is the following : <div class="bg-fixed ..." style="background-image: url(...)"></div>

I have an images folder in the webpack assets folder where my bitcoin.jpg image lives.

I have tried using <header class="bg-fixed" style="background-image: url(~assets/images/bitcoin.jpg)" This is not working, I have also tried classbinding, that doesn't work either. Anyone got an idea about a fix?

Thanks in advance!

I am using TailwindCSS in a Nuxt project and I am trying to add a background image to a header element. The tailwindCSS official docs solution for this is the following : <div class="bg-fixed ..." style="background-image: url(...)"></div>

I have an images folder in the webpack assets folder where my bitcoin.jpg image lives.

I have tried using <header class="bg-fixed" style="background-image: url(~assets/images/bitcoin.jpg)" This is not working, I have also tried classbinding, that doesn't work either. Anyone got an idea about a fix?

Thanks in advance!

• javascript
• vue.js
• nuxt.js
• tailwind-css

4 Answers 4

Try this (EDIT: This doesn't work, scroll down):

<header class="bg-fixed" style="background-image: url(~@/assets/images/bitcoin.jpg)"

The ~ tells webpack to treat the url as a module request, then you need to use a correct alias. In nuxt, these are usually prefixed with @.

EDIT

I didn't realize that there's something strange going on under the hood with Webpack. That syntax works with src attributes, but Webpack won't do the path resolution for background-image.

Here's the real fix:

<header class="bg-fixed" :style="{'background-image': `url(${require('@/assets/images/bitcoin.jpg')})`}"

By using require, you signal to Webpack to use the file-loader to create the proper module path, and replace that in the url function.

Working example: https://codesandbox.io/s/late-mountain-zdw09?file=/pages/index.vue

Quote for reference:

In order for Webpack to return the correct asset paths, you need to use require('./relative/path/to/file.jpg'), which will get processed by file-loader and returns the resolved URL

Page where the quote is from: https://vuejs-templates.github.io/webpack/static.html

Ref: https://github./vuejs/vue-loader/issues/646

package.json

"nuxt": "^3.0.0"
"@nuxtjs/tailwindcss": "^6.1.3"

1

<header class="bg-fixed bg-[url('assets/images/bitcoin.jpg')]"/>

2

<header class="bg-fixed" :style="{ backgroundImage: `url('assets/images/bitcoin.jpg')` }"/>

3

<header class="bg-fixed" :style="`background-image: url('assets/images/bitcoin.jpg')`"/>

The header hasn't got any content, nor height or width so it is not displayed. And you can't see the background. A working solution would be :

<div class="bg-fixed w-full" style="background-image: url('/images/bitcoin.jpg'); min-height: 200px;" />

I added 100% width and 200px min-height. And also, you seemed to miss the single quotes around the image path.

bg-fixed isn't quite the best solution, you should try bg-cover or bg-contain with bg-no-repeat

https://tailwindcss./docs/background-size#class-reference

I am just going to leave this here (as a self note maybe!).

You don't have to use require or any other package in this example.

I am also using a variable to get the image name (this can work in a v-for etc).

<script setup>
  let imageName = '1.png';
</script>

<template>
  <div>
    <div :class="['bg-[url(/images/'+imageName+')]']" class="w-[200px] h-[200px]"></div>
  </div>
</template>

IMPORTANT NOTE : if you declare a path like I am doing in the example, then it means that the /images/ folder is inside public folder (public/images/1.png).