Kevin Powell - Community•17mo ago

Background images

Need help with this

9 Replies

JaViLuMa•17mo ago

Don't you miss / in front of images inside url? /images/...

MoniOP•17mo ago

tried but did not maken any difference

neal mcguire•17mo ago

The url needs to be based on the location of the html file. Did you check that?

Choo♚𝕂𝕚𝕟𝕘•17mo ago

The screenshot shows that the images folder is not inside of components. It looks like two levels up, so the url probably should be "../../images/bg-main-desktop.png"

MoniOP•17mo ago

but it is in my public folder

Choo♚𝕂𝕚𝕟𝕘•17mo ago

The error message shows that it is looking for the images folder inside of src.

MoniOP•17mo ago

whenever i do not use background images it and used simple image using <img> it worked but for background is the only problem

mranxiety.•17mo ago

I found the easiest way to add a background image while using Tailwind is to create a class in your globals.css file and then add that class to your element.

.background-image {
    background: url(./assets/DESKTOP-BW.png);
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
}

.background-image {
    background: url(./assets/DESKTOP-BW.png);
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
}

or you could add the image to the Tailwind config file

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

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

I hope this is somewhat usefull or is there a specific reason you need it added in that particular way?

MoniOP•17mo ago

thanks

Gaming

Programming

Background images