mranxiety. Comments - Answer Overflow

mranxiety.

•Created by Moni on 8/14/2023 in #front-end

Background images

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?

10 replies

Gaming

Programming