'Next.js Set background Image

I am trying to add a background image to next.js but not able to do so. I have tried many solutions inline scc, style jsx, and other techniques. Not able to write directly into the style because it give error

Error:

Expected a template literal or String literal as the child of the JSX Style tag (eg: <style jsx>{`some css`}</style>), but got BinaryExpression

also tried this solution but got error:

Code

const img = require("../../assets/images/security-team.jpg");

<div
  style={{
    backgroundImage: "url(" + `${require("./path-to-the-image")}` + ")",
    width: "100%",
    height:[HEIGHT OF THE IMAGE],
    backgroundRepeat: "no-repeat",
    backgroundSize: "cover"
  }}
>XXX</div>

error

Failed to compile
./public/121.png 1:0
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)

But when try this code it will not give error and background image also not shown on the webpage.

Code

export default function Home() {
  
  let styleConfig = { backgroundimage : '/abc.jpeg' }

  
  return (

      
    <div className="container"  style={styleConfig} ></div>
      
     


      <style jsx>{`
       
       
        .container {
          min-height: 100vh;
          padding: 0 0.5rem;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          background-image : "/public/121.png"
        }
        

        
      `}</style>



      <style jsx global>{`
        html,
        body {
          padding: 0;
          margin: 0;
          font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
            Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue,
            sans-serif;
        }

        * {
          box-sizing: border-box;
        }
      `}</style>
    </div>
  )
}

Solution 1:^[1]

An official support had been provided by NEXT.JS Two steps are required.

Wrap the Image component with div which has styles (will provide example).
Provide the Image component with the attributes as mentioned in the Example.

Demo: https://image-component.nextjs.gallery/background

Documentation: https://nextjs.org/docs/api-reference/next/image

Code: https://github.dev/vercel/next.js/blob/canary/examples/image-component/pages/background.js

Solution 2:^[2]

use the following code:

import Image from 'next/images';
import {bgWrap} from '../styles.module.css';

<div className={bgWrap}>
      <Image
        alt="travel"
        src="your img path inside public folder"
        layout="fill"
        objectFit="cover"
        quality={100}
      />
</div>

Add this style:

.bgWrap {
position: fixed;
height: 100vh;
width: 100vw;
overflow: hidden;
z-index: -1;
}.......

Solution 3:^[3]

keep your image in the public folder

const img = "/thisImage.png";

    return (
        <div className="image">

            <div>XXX</div>
            <style jsx>
                {`
          .image {
            position: absolute;
            top: 0;
            right: 0;
            left: 0;
            height: 100%;
            background-size: cover;
            background-position: center;
            background-image: url(${img});
          }
        `}
            </style>
        </div>
    )

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Al1
Solution 2	yestin
Solution 3

'Next.js Set background Image

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]