21

all,

I'm trying to make tailwinds backgroundImage solution work, and I found help for many other tailwindcss problems here or on github, but not for this. It's not a complicated task, but still doesn't work. So as in the documentation, I want to create 2 simple background image to use for multiple viewsize. It is stated in the documentation https://tailwindcss.com/docs/background-image "By default, only responsive variants are generated for background image utilities." It means, without any further configuration on variants, I should be able to use it for this purpose.

Here is how my tailwind.conf.js looks like (important part is at the end):

const plugin = require('tailwindcss/plugin')
module.exports = {
    purge: [
      "./pages/**/*.vue",
      "./components/**/*.vue",
      "./plugins/**/*.vue",
      "./static/**/*.vue",
      "./store/**/*.vue"
    ],
    theme: {
        extend: {
            minHeight: {
                '120': '30rem',
            },
            height: {
                '15': '3.75rem',
                '17': '4.25rem',
                '7': '1.75rem',
                '75': '18.75rem',
            },
            width: {
                '15': '3.75rem',
                open: '11.875rem',
                '75': '18.75rem',
            },
            margin: {
                '7': '1.75rem',
                '17': '4.25rem',
                '27': '6.75rem',
            },
            padding: {
                '7': '1.75rem',
            },
            borderWidth: {
                '5': '5px',
            },
            fontSize: {
                '5xl': '3.375rem',
                'xxl': '1.375rem',
            },
            boxShadow: {
                'lg': '0px 0px 10px #00000033',
                'xl': '0px 0px 20px #00000080',
            },
            gap: {
                '7': '1.75rem',
            },
            inset: {
                '10': '2.5rem',
                '11': '2.75rem',
                '17': '4.25rem',
                '1/2': '50%',
            },
            backgroundImage: {
                'hero-lg': "url('/storage/img/sys/lg-hero.jpg')",
                'hero-sm': "url('/storage/img/sys/sm-hero.jpg')",
            },
        }
    },
    variants: {
        opacity: ['group-hover'],
        backgroundOpacity: ['group-hover'],
    },
    plugins: []
}

Just to make sure I included the full content. And this is how the html looks like:

<div class="bg-hero-sm lg:bg-hero-lg h-24 w-24">
   potato
</div>
<div class="h-24 bg-gradient-to-r from-orange-400 via-red-500 to-pink-500"></div>

As I said, nothing special, "npm run dev" finishes witout any error...but if I inspect the element, I cannot see anything related to any background parameter in css. Even the example from documentation doesn't work, which should have to provide a gradient block. I don't think it's important info, but I use tailwind with laravel.

Can anyone help me with that? I'm desperate, and I'm trying to make it work for days :(I can do workaround using css code in my sass file, but I want to use tailwinds own solution)

Thank you all in advance!

Repag
  • 321
  • 1
  • 2
  • 5
  • Have you tried using `relative path` instead of `url()`? – Digvijay Aug 30 '20 at 15:29
  • I tried, but it doesn't help. I think regardless the definition of the picture I should see a css parameter of the element with some kind of image path, which if the path is bad would not work, but styles on the elemet are only `element.style { } .w-24 { width: 6rem; } .h-24 { height: 6rem; } *, ::before, ::after { box-sizing: border-box; border-width: 0; border-style: solid; border-color: #e2e8f0; } user agent stylesheet div { display: block; }` So I'm missing `.bg-hero-sm {background-image: url('something';}` – Repag Aug 30 '20 at 17:59
  • Which version of tailwindcss are you using? – Rinho Sep 01 '20 at 11:13
  • tailwindcss@1.6.2 – Repag Sep 01 '20 at 16:13
  • @Repag there is the problem. Background Image is a feature from versión 1.7.0. You need to update you tailwindcss to the last version. I just tried your code with version 1.7.0 and it works like a charm – Rinho Sep 02 '20 at 14:54

9 Answers9

26

I was having this issue in TailwindCSS 2.2.7 My issue was that my syntax was wrong.

tailwindcss.config.js:

theme: {
    backgroundImage: {
      'pack-train': "url('../public/images/packTrain.jpg')",
    },

App.js

<div className="rounded-lg shadow-lg mb-2 h-screen bg-pack-train flex flex-col sm:mx-8"></div>

The ' and " are critical. For some reason eslint was going in and "cleaning" those characters up on save, which was making it not work. Also, the ../ leading the url was also critical.

Isaac Tait
  • 533
  • 5
  • 12
12

If you don't want to extend your theme in the tailwindcss.config.js and want to add the background image directly to your div you can try:

<div className="bg-[url('../public/assets/images/banner.svg')]">

This is the simplest way to get background images working.

Reference: Check under Arbitrary values heading

draysams
  • 1,199
  • 1
  • 11
  • 18
6

The background image functionality of tailwindcss has been released in version 1.7.0.

I tested your code in my development environment and it didn't work either since I also had an earlier version of tailwindcss. After upgrading to the latest version, your code has worked fine.

Rinho
  • 564
  • 3
  • 8
  • wow, I thought I'm using the latest version, but it seems v1.7 came out on 18th of August, which was later then my initial install. I will try to upgrade and check, and get back to you – Repag Sep 02 '20 at 15:14
  • after the upgrade tailwind is messed up :D so trying to make it work again... – Repag Sep 03 '20 at 08:06
  • Thank you very much, it helped, and now it works. To be honest "npm install tailwindcss@^1.0 --save-dev" was not a big help, since it messed up my tailwind. What worked to "npm uninstall tailwindcss" first, and then "npm install tailwindcss" now I have the new version, and backgroundImage works like a charm! :) – Repag Sep 03 '20 at 09:55
6

editing your tailwind.config.js

module.exports = {
theme: {
  extend: {
    backgroundImage: theme => ({
     'hero-pattern': "url('/img/hero-pattern.svg')",
     'footer-texture': "url('/img/footer-texture.png')",
    })
  }
}

add name and the URL for your image and use it. example bg-hero-pattern

Malith Ileperuma
  • 926
  • 11
  • 27
4

u need to add (theme) props to your config like this:

backgroundImage: (theme) => {
                'hero-lg': "url('/storage/img/sys/lg-hero.jpg')",
                'hero-sm': "url('/storage/img/sys/sm-hero.jpg')",
            },

or url with "../" like this

backgroundImage: (theme) => {
                'hero-lg': "url('../storage/img/sys/lg-hero.jpg')",
                'hero-sm': "url('../storage/img/sys/sm-hero.jpg')",
            },

Hope it works :)

Ronal Aldinal
  • 89
  • 1
  • 1
4

In ^3.1.8 version image path was not working. Then I just put "../" instead of "./" and it worked. Example:

  extend: {
  backgroundImage: {
   
    'hero-pattern': "url('../src/assets/images/bg.png')",

  }
}
Monzurul Islam
  • 41
  • 2
0

I had to specify a height for my image to be displayed

<div className="h-screen bg-hero"/>
Tobi
  • 148
  • 1
  • 10
0

For static image[set is background image] works for me.

  1. First import the image from the static image folder.
import m5 from '../Assets/a2.avif'
  1. Then use it like this.
 <div style={{ backgroundImage: `url(${m5})` }}>
R. Mahbub
  • 342
  • 6
  • 14
-5

module.exports = {content: ["./src/**/*.{html,js}"],theme: {extend{},backgroundImage: {"hero-lg": "url('/src/assets/images/bg.png')","hero-sm": "url('/src/assets/images/bg.png')",},},

class="hero-content bg-hero-sm lg:bg-hero-lg flex-col lg:flex-row-reverse"

Abdul Hakim
  • 1
  • As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community May 11 '22 at 09:29