Next.js Set background Image

Question

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

Does this answer your question? [Next.js background-image css property cant load the image](https://stackoverflow.com/questions/51842419/next-js-background-image-css-property-cant-load-the-image) — juliomalves, Oct 12 '21 at 10:31

score 8 · Answer 1 · answered Oct 29 '21 at 07:39

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

score 2 · Answer 2 · edited Feb 01 '22 at 16:32

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

edited Feb 01 '22 at 16:32

yestin

5
4

answered Oct 12 '21 at 08:23

Jagdish Bhatt

83
6

2

Please refrain from posting solutions without any explanation. Also, your code is incomplete and unclear. – Eldar B. Oct 12 '21 at 10:43
1

This does not work – Big boy Aug 29 '22 at 07:40

Ayse · Answer 3 · 2022-01-30T21:19:06.840

-1

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

edited Jan 30 '22 at 21:19

answered Nov 30 '20 at 07:50

Ayse

31
7

With those ordinal numbers, it looks like they would need to install the package and then use the `public` folder to store the images which is not the case. You should probably clear that up a bit. – Zsolt Meszaros Nov 30 '20 at 08:50
What I meant was that you don't need to install `next-images` to serve images from the `public` folder, only when you want to import images from somewhere else. If you keep your images in the `public` folder, you can simply reference them as you do in your example: `const img = "/security-team.jpg";` – Zsolt Meszaros Dec 01 '20 at 17:39

score -1 · Answer 4 · answered Dec 24 '22 at 06:56

-1

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

answered Dec 24 '22 at 06:56

Denny Firmansyah

1

[A code-only answer is not high quality](//meta.stackoverflow.com/questions/392712/explaining-entirely-code-based-answers). While this code may be useful, you can improve it by saying why it works, how it works, when it should be used, and what its limitations are. Please [edit] your answer to include explanation and link to relevant documentation. – Stephen Ostermiller Dec 24 '22 at 10:49

Next.js Set background Image

4 Answers4

Linked