2

i'm quite confused with NextJS and background property.

in a component, i want to make a hero section but i don't find how to use it in style jsx.

My component : 

const homeTitle = () => (
    <div className="home_title">
    <p>My title</p>
    <h1>something else </h1>
    
    <style jsx>{`
    .home_title{
        text-align: center;
        background: url(/public/background.jpg) no-repeat;
        height: 100%;
        width: 100%;
    }
    `}</style>
    </div>
);

export default homeTitle;

I've tried to install and set next-images, and configure in next.config.js like this :

// next.config.js
const withImages = require('next-images')
module.exports = withImages()

i also tried to use require in the image url...

how could i use background image in next js ?

Thanks for your help

Zsolt Meszaros
  • 21,961
  • 19
  • 54
  • 57
  • `url('${require('../public/background.jpg')}');` does this work? giving path of background image – Jagrati Apr 22 '20 at 17:59
  • I've already tried but it give me a Module not found: Can't resolve '../public/background.jpg' in '/Users/myprofile/Desktop/projectfolder/src/components/HomePage', my image is in the public folder –  Apr 22 '20 at 18:04

1 Answers1

0

EDIT : OK i found the way, first, i import image like this:

import Hamburger from '../../public/hamburger.svg';

then, in my jsx, i use it like this:

<style jsx>{`
    .hamburger{
        width: 62px;
        height: 62px;
        background: url(${Hamburger}) no-repeat;
    }
  `}</style>