Show background image

Question

<p>I want to add a background image to my project, but it doesn't work. </p><p>I tried adding a background image globally, but it didn't work. This is the home page code of Next.js. </p><p><br /></p> <pre class="brush:php;toolbar:false;">import { Inter } from 'next/font/google' const inter = Inter({ subsets: ['latin'] }) export default function index() { return ( <div className="myindex">           dcmkl </div> ) } this is global.css file</pre> <p>Style here</p> <pre class="brush:php;toolbar:false;">.myclass{ height: 1000px; width: 1000px; background-image: url('./pexels-johannes-plenio-1103970.jpg'); }</pre> <p><br /></p>

Answer 1

The best place to store local images is the public folder (and its subfolders) in the root directory of your project. You can import images from this location into your page or component like this

import someImage from '../public/some-path.jpg'

Then apply the inline style:

<div style={{
    backgroundImage: `url(${someImage})`,
    backgroundRepeat: 'no-repeat',
    backgroundPosition: 'center',
    width: '100%',
    height: '100%'
}}>
</div>