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

Publish date: 2024-06-03

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 !

2

23 Answers

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%', }}
7

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');
0

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

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

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

3

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" />
1

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>

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

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

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

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 (/).

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.

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>

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

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

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

image must be in public (example with tailwind)

<div className="my-5 lg:my-6"> <img src="./logotipo/logo.png" alt="easybanklogo" /> </div> 
 <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)" }} >

For me, this type of url works:

background-image: url("../../public/path/to/image.jpg")

The trick is to use two .. before /public (assuming your images are in public folder)

What I noticed in next js :

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

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

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

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

1

ncG1vNJzZmirpJawrLvVnqmfpJ%2Bse6S7zGiorp2jqbawutJobGpwZGeBcoWOp5yxrF2fwG6uwJyioKqfqrulecimmKCdXZjAtHnPq6apnaKpxm6vwKerZqSflrFuwMeeZKKlkZyy