Can't place a background image in next JS and Tailwind CSS

Question

I'm stuck and can't place the background image on my next JS app.

Here is my code.

globals.css

.container {
    padding: 0 2rem;
    background-image: url(../public/images/landing-page-illustration.svg);
}

index.js

import Head from 'next/head'
import Image from 'next/image'
import Navbar from '../components/navbar';
import styles from '../styles/Home.module.css'

export default function Home() {
  
  return (
    <div className={styles.container}>
      
       
      <Navbar/>
    </div>
  );
}

Answer 1

You just need to do this. It works for me. Update the tailwind class with your css.

<div className="relative"> <!--position: 'relative' -->
    <Image 
        src="image path"
        layout="fill"
        objectFit="cover"
    />
    <div className="w-full relative"><!-- position: 'relative' -->
        <h2 className="text-center font-semibold text-4xl pb-8 pt-14 text-pink-600">hello</h2>
    </div>
</div>

The height of background will increase according to the content. You can fix the height by

height:'80vw'

Answer 2

I also stuck in this problem then I just used next-images and declare this in the jest.config.js file like this -

module.exports = {
  async redirects() {
    return [
      {
       ...
      },
    ];
  },
  reactStrictMode: true,
  future: { webpack5: true },
  images: {
    domains: ['https://...'],
  },
};

const withImages = require('next-images');
module.exports = withImages();

and just used <img /> tag to render the image

     <img
        src={Wave}
        style={{
          zIndex: -1,
          width: '100%',
          position: 'absolute',
        }}
        className='md:bottom-px origin-center rotate-180 md:rotate-0 '
        alt=''
      />