0

Related:

Tailwind css backgroundImage doesn't work for me

tailwind.config.js:

module.exports = {
  theme: {
    ...
    extend: {
      ...
      backgroundImage: {
        "footer-sierpinski": "url('/bg.svg')",
      },

Layout.astro:

...
<main class="flex-1 px-4">
  <slot />
</main>
<!-- <img src="/bg.svg" /> --> <---- works
<!-- <div style="background-image: url('/apple-touch-icon.png');"></div> --> <--- doesn't work
<div class="text-slate-600 bg-footer-sierpinski"> <--- doesn't work
</div>
...

The image does not show regardless of format.

Tried different variations in the config file of tailwind:

/bg.svg
./bg.svg
../../public/bg.svg
/public/bg.svg

dependencies:

  "devDependencies": {
    "@astrojs/tailwind": "^1.0.0",
    "astro": "1.1.1",
    "autoprefixer": "^10.3.7",
    "feed": "^4.2.2",
    "prettier-plugin-astro": "^0.5.3",
    "tailwindcss": "^3.1.8"
  },
  "dependencies": {
    "@tailwindcss/aspect-ratio": "^0.4.0",
    "@tailwindcss/typography": "^0.5.8",
    "moment": "^2.29.4",
    "rehype-autolink-headings": "^6.1.1",
    "rehype-slug": "^5.0.1",
    "twitter-api-client": "^1.6.1"
  }
Sebi
  • 4,262
  • 13
  • 60
  • 116
  • 1
    Is the div empty as shown in your example? Have you tried adding content inside the div or giving the div a height like `h-64`? A background image does not force a div to show up, it just fills in the background if the div were to show up. – JHeth Nov 21 '22 at 21:44
  • 1
    that was it; the height defaulted to 0 on div – Sebi Nov 21 '22 at 22:00

1 Answers1

0

If you need to use a one-off background-image value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.

<div class="bg-[url('/img/hero-pattern.svg')]">
Fatwa Reza Rizqika
  • 44
  • 2