CODEWITHSUNDEEP
javascriptcssreactjsnext.jstailwind-css
Russel Osiemo
Russel Osiemo

Reputation: 9

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

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>
  );
}

Upvotes: 0

Views: 5801

Answers (3)

thewildrover
thewildrover

Reputation: 1

Both layout="fill" objectFit="cover" are deprecated ion the above answer given by Puja Rashmi.

According to VS: (property) objectFit?: string | undefined @deprecated — Use style prop instead.

'objectFit' is deprecated.ts(6385) image.d.ts(78, 8): The declaration was marked as deprecated here.

Upvotes: -1

Puja Rashmi
Puja Rashmi

Reputation: 128

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'

Upvotes: 2

Nikhil Tayal
Nikhil Tayal

Reputation: 132

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=''
      />

Upvotes: -1

Related Questions