Next.js background-image css property cant load the image

Question

I'm trying to access a static image to use within an inline backgroundImage property within React.

i am working with reactjs and next.js then i faced an issue with adding images with next.js but fixed this by using image loader called : Next.js + Images,

now i could add images normally with normal html img tag

Example: <img src={ img } /> this works.

but when i tried to add css background images as the following:

const team = (props) => {
const img = require("../../assets/images/security-team.jpg");
const styling = {
    backgroundImage: `url('${img}')`,
    width:"100%",
    height:"100%"
}
console.log(img);
return (
    <div className="team" style={styling}>

    </div>
);

}

here was the console.log results :

/_next/static/images/security-team-449919af8999ae47eaf307dca4dda8e1.jpg

the image doesn't appear and no errors happened then, i tried to type in the browser website-url + the console.log results the image appeared !

Add ".src" to line 4 of your code: backgroundImage: url('${img.src}'), — taotao
– taotao, Commented Mar 21, 2022 at 5:48

M.Islam · Accepted Answer · 2021-10-12 11:27:37Z

141

First import the image file

import bg from '../../assets/images/security-team.jpg'

then apply inline style

style={{
      backgroundImage: `url(${bg.src})`,
      width: '100%',
      height: '100%',
    }}

answered Oct 12, 2021 at 11:27

M.Islam

1,7203 gold badges16 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Azhar Over a year ago

.src is the main thing

Jishnu V S Over a year ago

@M.lslam : backtick helped me

Sins97 Over a year ago

what does ".src" do here?

M.Islam Over a year ago

When you import the image as bg then it return an object. This object will provide you the src property that is the path of the image. You can use console log to see the object on console.

Stamatis Deliyannis Over a year ago

Does Nextjs optimise the image like it does with <Image/> if you import it this way?

|

Peter W · Accepted Answer · 2021-10-10 00:38:24Z

55

With [email protected] I had my image in the public folder and then in the style file I used the following and it worked.

background-image: url('/image.svg');

answered Oct 10, 2021 at 0:38

Peter W

1,5041 gold badge17 silver badges24 bronze badges

1 Comment

redbmk Over a year ago

the problem with this is anything in public has headers telling browsers not to cache it, so your client will end up fetching the image on every page load

jfunk · Accepted Answer · 2022-04-04 14:48:13Z

32

All the solutions here don't allow the main benefits of NextJs custom <Image> component which serves optimized, responsive images by default and has immense benefits. When I can, I use z-index to "fake" a css background image.

However, this method does have the limitation of not having repeatable options like a CSS background would.

Note that this example uses Tailwind CSS.

<div className="h-screen">
    <div className="absolute -z-10">
        <Image
            src="/some.jpeg"
            layout="fill"
            objectFit="cover"
            quality={100}
        />
    </div>
    <div> Some overlay things go in here </div>
</div>

edited Apr 4, 2022 at 14:48

answered Jan 15, 2022 at 17:47

jfunk

8,2724 gold badges43 silver badges41 bronze badges

3 Comments

Nick Howard Over a year ago

This is nice, using the <Image> component is a big plus

Stamatis Deliyannis Over a year ago

True. but the background image has properties that you cannot use with image developer.mozilla.org/en-US/docs/Web/CSS/background-image

Joe Roddy Over a year ago

I needed to add inset-0 to the absolute wrapper for it to show up for me. <div className="absolute inset-0 -z-10">

Vigneshwaran Chandrasekaran · Accepted Answer · 2020-11-12 16:45:24Z

22

css file in styles/home.scss

Image file in public/bg-img.png

.content_bg {
    margin: 50px 0;
    background-image: url('../public/bg-img.png');
    height: 500px;
    background-size: cover;
    background-repeat: no-repeat;
}

answered Nov 12, 2020 at 16:45

Vigneshwaran Chandrasekaran

3,2931 gold badge29 silver badges21 bronze badges

3 Comments

bFunc Over a year ago

this solution works, it just should be mentioned that those images will be added to the bundle during build, so better not to place them in /public folder to avoid confiusion

Nilupul Heshan Kodikara Over a year ago

👍This answer explains nicely with image path. most of the time that is the issue. Thanks

Speedy11 Over a year ago

this works as of date . the '../' way of addressing the path did the trick. thanks

thpo · Accepted Answer · 2019-12-23 23:51:32Z

15

The package next-images works for me.

First :

yarn add next-images

Then, in a next.config.js file :

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

Then you can do :

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

For more info on next-images : https://github.com/twopluszero/next-images

edited Dec 23, 2019 at 23:51

answered Dec 22, 2019 at 16:06

thpo

1511 silver badge4 bronze badges

3 Comments

Wassim Al Ahmad Over a year ago

Can you mention the way to solve the problem and explain the modifications you made to the code?

thpo Over a year ago

I've edited my answer to show the entire process. It's quite straight-forward.

Wassim Al Ahmad Over a year ago

That's right, thanks for your cooperation It is clear now

Ivan · Accepted Answer · 2022-02-03 11:23:42Z

10

As nextjs documentation says (https://nextjs.org/docs/basic-features/static-file-serving):

Next.js can serve static files, like images, under a folder called public in the root directory.

Files inside public can then be referenced by your code starting from the base URL (/).

So the right way to reference our images from the public folder:

CSS example:

background-image: url('/your-image.jpg');

JSX example:

import Image from 'next/image'
<Image src="/your-image.jpg" alt="Image description" width="64" height="64" />

answered Feb 3, 2022 at 11:23

Ivan

2193 silver badges4 bronze badges

1 Comment

Prav Over a year ago

Sometimes devs need to put the images as background for divs, can we leverage next/image in this use-case?

Loi Nguyen Huynh · Accepted Answer · 2019-12-22 19:34:33Z

6

when i used JSX styles then added position absolute property it worked just fine.

Like this:

 <style JSX>{`
    .team {
        width:100%;
        height:100%;
        position:absolute;
        background: url('`+img+`') no-repeat;
    }
`}</style>

edited Dec 22, 2019 at 19:34

Loi Nguyen Huynh

10.2k5 gold badges33 silver badges58 bronze badges

answered Aug 14, 2018 at 14:36

Hassan Kandil

1,8861 gold badge15 silver badges29 bronze badges

Comments

wentris · Accepted Answer · 2021-01-13 09:20:00Z

4

all what you have to do is to change url

from background-image: url('/public/images/my-img.jpg');

to background-image: url('/static/images/my-img.jpg');

edited Jan 13, 2021 at 9:20

answered Jan 12, 2021 at 13:35

wentris

5135 silver badges10 bronze badges

Comments

swanf · Accepted Answer · 2022-02-26 03:27:00Z

4

I'm using Next.js v12.0.10, and it fails to load css background image when I try something like:

<div style={{ backgroundImage: "url('/public/a.jpg')"}}>
</div>

but when I omit the /public in the image url, everything works:

<div style={{ backgroundImage: "url: '/a.jpg')"}}>
</div>

Just like Ivan says above:

Files inside public can then be referenced by your code starting from the base URL (/).

answered Feb 26, 2022 at 3:27

swanf

1097 bronze badges

1 Comment

Sandeep Amarnath Over a year ago

Perfect! This helped me solve my issue. Thaanks.

skorzh · Accepted Answer · 2018-08-18 08:13:46Z

3

You can also try to use '/static/images/security-team.jpg' without import if you place your image in '/static/images/' folder. For example:

const styling = {
  backgroundImage: "url('/static/images/security-team.jpg')",
  width:"100%",
  height:"100%"
}
return (
  <div className="team" style={styling}></div>
);

answered Aug 18, 2018 at 8:13

skorzh

1575 bronze badges

1 Comment

Hassan Kandil Over a year ago

Module not found: Error: Can't resolve '/static/images/security-team.jpg'

Akhigbe-E · Accepted Answer · 2020-07-12 15:24:19Z

3

You can put the image in the public folder, and access it like so:

const team = (props) => {
const styling = {
    backgroundImage: `url('./security-team.jpg')`,
    width:"100%",
    height:"100%"
}
return (
    <dev className="team" style={styling}>

    </dev>
);

answered Jul 12, 2020 at 15:24

Akhigbe-E

2972 silver badges3 bronze badges

2 Comments

Strubbl Over a year ago

what is the public folder?

Peter W Over a year ago

@Strubbl you should see a folder named public in the root of your project. It is on the same level as your src folder. It is automatically generated when you create a new project.

Cobertos · Accepted Answer · 2023-08-01 03:23:24Z

3

Next.js by default supports .scss and related files. Internally, Next.js uses a Webpack loader to load css that will follow url("") values and translate them to the output file name in the same way that import bg from '../../assets/images/security-team.jpg' will.

So as long as you're importing your css in a way that Webpack can understand import styles from './MyModule.module.scss' or similar, you can directly url('relative/path').

For example:

.team {
  background-image: url('../../assets/images/security-team.jpg'),
  width: 100%,
  height: 100%
  /* ... */
}

And the above does NOT require it to be in the public folder

answered Aug 1, 2023 at 3:23

Cobertos

2,29327 silver badges45 bronze badges

Comments

EndePointe · Accepted Answer · 2021-05-13 03:02:19Z

1

the /static directory was deprecated. anyone who tries to use it will probably get the error message in their console but here the link containing NextJS' explanation of why they chose to deprecate the static directory.

Because public also covers the static directory use case we have decided to deprecate the static directory in favor of creating a public/static folder with the same functionality.

answered May 13, 2021 at 3:02

EndePointe

1011 silver badge2 bronze badges

Comments

marquitobb · Accepted Answer · 2021-10-05 22:12:29Z

1

image must be in public (example with tailwind)

<div className="my-5 lg:my-6">
 <img src="/logotipo/logo.png" alt="easybanklogo" />
</div>

answered Oct 5, 2021 at 22:12

marquitobb

4385 silver badges7 bronze badges

Comments

MD Mahmudul Hasan · Accepted Answer · 2022-01-25 06:16:42Z

1

for use dynamic image

first of all declare style like this

 let style = {
        backgroundImage: "url(" + props.image + ")",
    }

then

<div style={style}>
    <div className="content">content here</div>
</div>

answered Jan 25, 2022 at 6:16

MD Mahmudul Hasan

3863 silver badges7 bronze badges

Comments

Christian Forkoum · Accepted Answer · 2022-11-06 15:27:10Z

1

What I noticed in next js :

you can access files in the public folder direcly by including it's path from the public folder (not including the public folder or a route to that public folder ) for and inline BackgroundImage => "/image.png"

for and background-image(In a css file) => define a path from the file your coding in to that image eg "../public/image.png"

Back to what i was working on ...

  <section style={{ backgroundImage : "url('/4.jpg')" }}>

answered Nov 6, 2022 at 15:27

Christian Forkoum

112 bronze badges

Comments

علی داودی · Accepted Answer · 2021-10-24 07:53:21Z

0

 <div
  class="horizontal-layout horizontal-menu navbar-static dark-layout 1-column footer-static bg-full-screen-image  blank-page blank-page"
  data-open="hover"
  data-menu="horizontal-menu"
  data-col="1-column"
  data-layout="dark-layout"
  style={{ backgroundImage: "url(/assets/images/pages/auth-bg.jpg)" }}
>

answered Oct 24, 2021 at 7:53

علی داودی

4415 silver badges8 bronze badges

Comments

Yilmaz · Accepted Answer · 2023-11-24 20:50:53Z

0

in next.js 14 with tailwind

    import imagePath from "public/image.png"
    
    // inset-0 makes it fill the entire space within its parent container.
    <div className="absolute -z-10 inset-0">
              <Image
                src={imagePath}
                alt="always add alt"
                fill
                style={{objectFit:'cover'}}
              />
              {product.title}
       </div>

available props

answered Nov 24, 2023 at 20:50

Yilmaz

51k19 gold badges226 silver badges278 bronze badges

Comments

Rinoy R K · Accepted Answer · 2021-09-17 12:03:08Z

<div className="VistaCodeLab" style={{backgroundImage: ` url('data:image/png;base64,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')`}}></div>

use like this with base64 image

Online conversion tool for image to base64 https://www.base64-image.de/

Rob · Accepted Answer · 2021-06-22 00:06:49Z

-2

I managed to get around this by using the src property of the image object so:

{ img.src }

Their documentation shows a background image implemented via the below method though:

import Image from 'next/image'
<Image />

Here's a live demo - https://image-component.nextjs.gallery/background

answered Jun 22, 2021 at 0:06

Rob

1073 bronze badges

1 Comment

zrooda Over a year ago

The next/image package returns a severely opinionated element, the question is about simply using the asset path string in your code as you need.

Jason Prince · Accepted Answer · 2021-12-10 22:10:19Z

Example using Nextjs, node modules and scss.

    import styles from "../styles/Home.modules.scss"
    import Image from "next/image"
    export default function Home() {
      <div className={styles.background_image}> 
        <Image
          width={2746}  //use the width of the image being used
          height={4681} //use the height of the image being used
          layout="fill"
          alt="water_portrait"
          src="/home/water_portrait.jpg" //image saved in public/home
        />
      </div>
   }

  //styles/Home.module.scss
  .background_image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1;
  }
  .somethingElse{
      positsion: relative;
      z-index:10;
  }

Ankush Chavan · Accepted Answer · 2022-10-16 14:59:17Z

-2

Next.js can serve static files, like images, under a folder called public in the root directory. Files inside public can then be referenced by your code starting from the base URL (/).

For example, if you add an image to public/me.png, the following code will access the image:

background-image: url('/img/imge1.png');

answered Oct 16, 2022 at 14:59

Ankush Chavan

53 bronze badges

1 Comment

Zorayr Over a year ago

This assumes you're loading from /, if you load from a subpath, it will be wrong!

Collectives™ on Stack Overflow

Next.js background-image css property cant load the image

22 Answers 22

6 Comments

1 Comment

3 Comments

3 Comments

3 Comments

1 Comment

Comments

Comments

1 Comment

1 Comment

2 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

1 Comment

1 Comment

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

22 Answers 22

6 Comments

1 Comment

3 Comments

3 Comments

3 Comments

1 Comment

Comments

Comments

1 Comment

1 Comment

2 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

1 Comment

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related