score:6

Accepted answer

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>

score:-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

score:-1

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

score:0

<div classname="vistacodelab" style={{backgroundimage: ` url('data:image/png;base64,ivborw0kggoaaaansuheugaaagqaaabkcayaaabw4pvuaaanyuleqvr4no3bavru1wehcgzane2bpkk09qaxqfrr3aarutfookzz3iji2nyiqialzdfighizratuowqsapqgswwfbercmjmsaymdzmisaze4iyrksmzy7n3z7wekzulvzmago7m/c+4xnxe3/7w3j3fvs7jigizhgizhgizhgizhgizhgizhgizhgizhgizhgizhgizhnl0aergfrjo7borskcye4xm9fwv/f7crluzxl5jb8gqp2nxbmogcg4vpkqxghhd6xhpaocb8yogctl+mntjekn38rxd0cpy85qrkipbzac8mb/lwueq5osepousbru62luzzc8nbm8h1tbpk+omguhrij4lhlqeidgwzn/lts47hutdgo3b0riby348kwlyb/dcybdh5jqtu6ttozb9ljumz1n/fbutomek/exxe8kqwzbni/wpp9rwkbhtz2ldelhzjm2gqk7tdyogcnigc8b1nxkkcpjgvsi17bccav02pp+x40ffeoafg1n80x3akoy+d3ruwhppp0uaxe/uhpiisbxjcja3cztsop3wmlz+4xf18y3c6d1d7z5s+g0b2wz4ioibqeh13tuxc0e2xahpywvlzdxr1tzu2mhipuse7avu6nj0hv2ke0f+mvdlswg9fqepogyjou/mbomnf5j8xbtk0+kf/bliwrerb3le7iqytrv/uan+euj52dm/mf6qmcusk9wlckuil69/z8ff54xh/b1owjte8o3ae2tra/tzc/es2nqng/wm+iduuuuganty12ydu99djwzedjfnsf4mx4liax9r41tsmaamtk9nvznlfi+jvq9cfvko2r9tupl5njidsroxhrjwdng8aia7gsvwlt3zx8yttkk/o3dsq4gaqy60gtzmqmzqq0nsg8k01jyilhkzm0dnzp7rkyretzmbxavkvukvqnsdhxynth9fekhgt3zb2ny5wvffjfrh6wzpowkfgxsbmjc/o7wvji9s3zxvgeaehjl/acsn9aqgpuk8httzksaew4nqdj2k1asononqaylzapqeqneclbshvmobgfufijg4xhxpigniunxlqotyg6zrbum+v7z6pbzoceddvtghe7rcxf/cr885qj9jb27/ohz20pl6o8yax9/n9hg9/ran64+lifpvwcqoorgtc0qhx9uadb5y5riowjqk4bza2awvnqg4tifid2wogrw0i1ybydespaxe9j7p1bmtcmebunqgnbvi4dz3hl6x1zcz8s00jzoo4tuewsgpu+x1dt3j3d//15gxrfsyxnv41nght/ubydnoukp3aaekzigsbipsm2chtxzrsjmrcouitpchubdibgtonwokhwmn7wlf3gw/uasfuatn1bpy8tpf1dcux1rs7l/hyezeiqzjih5jg7l+3f2rsf0w6y3jvyd5zsmarcznrih8fnxcmbk/2ixxfqrzeefzwvlbw1k4vb5+6fe1ya/cp+0dqdqocs3wy/a8whk7kcksayrocw/psgn/cnedkfqo+vmfalw0gjn814pada7ju80i/snggiudzcokj1rrb5atrpqshug4r8znespr1r9u6/nguvg0zn/ntxqe+22/m7fuakyqjk5f/vnnm2ejti0oxorpyswxrbmty4u9cyzhsuqxsvcqjspcdf7yei4q6pf+l2ftjec3j4j/lyugbhil1pi7cnedvd9pktj2pjb8ovrhisfvfifaqffld8xkfqyred/9sleae12hegs0mxb4xdkapfqen7oobklrhqgdsvujnr8b3otpoi00iwuxzvjhkyscsrkys3nkyyu13vt8cfynhd7d4hk+l2kogcc/ksf1fkfpd8zmsyfkrhzlipwbmadffrmxe6zxs7xggroerfo3hgwqkecxbj3kceavbcnxbsz/koczoaswsddvmnmqgv7pwyzp2fzvo9tekye6qzjl6+y/tbftwdp7+7/50cchsqbqljtsfv6+coeztqpk9hlk3ehxvs3hwisf31ylsainilaslpqrbeg4hrxqsk9fjdywhwrs8sm7xohavr1ivryycykosilwwolceorcex75kgmijfmtfldgra8gwc1rminyzpav9njayrauxrgsunx4xby6jsq3y2dup6s4g2s2i2zvwsuqh8u0e567zopudxtexcakldfhioknecydtvrtrfbthprsryihiyyn21vakqjiesfvykkff4jwnoquazfzlunvowa/nbtzvgpb5gyc+risyiqyhvtokiu/jg78mjzir/6yey1lf/yy7onvneo1esbn7y1b6vet/kxmcu0rxqjpirwwbd7ygxiidpmr6zc4gcc6mwcgjwfjcsaym4tmkcn+jhu5zorhn6jdpvbbvntpgu7kemxu8za08mm/xcjpq4zujwdxzrziv/gdtky9d+2nf+9fnpy6+g0b2mzeqsutjj4xmqvdxgzbwl3llj5l7ad820hvpjh8x4fduemyralvszbfpmsoxw7q8dh4sguvlfkfyinafxvolxf5ahhfygnfcdunzolhl6zexs4fnlrqpl3lkxocrjafwzecww6jdncwnzp5oodztzphj+wjtvm/2sfqqnqudatvdqpkfjyy5veb9xwcsvhctrjctrcql+cbfjylipayvehgvuoqqkcjvpglkexxcwsptco+ekorrigjneyglkoc9xiiyfywgiijssregpfigggbolgfvfzfbofjivkx637yuxx76ssugjlxyz95laedpqbmvxgcp7tvotk6/ccy4xlrcrhagpfdm5+au5jc9kglobr7l5tziknjev1ikvfj8e4vixzwfg4ja8wgziqfyvmojxegxqiricqnbwmikv3wo7oduend391+bu9/gbnf+ptg58ogu7ryhh3psolr+tjqtaolgbmdnhxhewqtnfbbmyicylyyyn0cxx8bjo1kkrvuu2yspdlzrhltecbswyryiweli4cakmjhp4c2lwfdcy2exqbiciqymwjtb1/jqiin9zdlxo4nqek1vquqelq3f2zppsg9jfp7oqdflbdnhxeygxynb+fycmblt3/wzeoiqwdsjkc++pzh0kedqryldfwn8cwmm5rkmexi45bdmlkryukqxrjti4woes0oi3l6w6unz9c/bm8jvycd0y1neb8y6w2xetdmoernlhe7imhcwfl9eoor6mawhiyhjwt2wf1nsvxecrye4wk2wt6ktrjvwccrkmeniyww2wtizwtizryscir6kh8v+omrz9mnbm8h1zunvuy7mqianjcrfldx4jhnpyp/rznp0zvz3btnggnorpkl1zyfsth9rtxwos/pb/ni/c4vdyvcc/qzsk58poesx6dh2vb4lcjmeyqhcijgkvfcefjbv9bzctfvxy4noh/uamrmgdau9k4z2dhbfe1kv1x3b2l0f5oqwtcgkeyd3z+ngnathdakh4vuoe8r12fjwvhlkemws5ecro0nucycigye1jqt7v+e5uv7+zp1t3+gght6b2jppsu9sw13m5ou/1ahnxv0mxieyzcp7ig5z8vtwy9njuyeogbv6xjboef3cvtbldiir6vbxiq4bsvvyx8rhuzlb2m6j0z1q04qgijlktw+don2hm+2yhyaebkfrzm4q1yksfyypj88lu9nqriefeizk1ykkqiunjtqefwor/rcefwkrv6zfz2u6xjfpsbgmq4lwcqapq3kpz/7zhf9gtd00hd0raixpm9znapsygltkn1zcv2mjyf4fnvgtjqx6e2gfwqyvabbrpegasimlerosztmgukzbhkintsp12clx4tnp4523hmzbg1v/am8a98dt8v6/injvqkepalfozvq38/hxecetcpwcdck6wmodgetkbmdm3fy+ur+sk9yhtqbfjpkg0zm1+fcogw9mk6aea0wsxipdch12kfugj+xrvi2p06qgtqokzh4fvte1gxpk7o3tx/sosvoal228zuwtojhvb8zbdf7g1jindsk1mhg+fboywjersxvtzrbigfkdfuot1h48vbejekwjijb3lswtelwhewbmkboxsxnjkzopzjhdkcye07v3in9vet2ppktswf/yimlnwjd1u2b45btislkg+wpvkpv2df3d4443jygn4jrfhkdw2u9l84klwvtbv+wztsmyxqpu6gowtmo9hnpknbo1+s2yebyz3meassq/bv9xabv+67c98j1ejy//qwvtlwkjzghxxavbypj85zkin+rzc/arvolhpklukaddcwzuxm41ggstwcfswkpxmxiutcbqy+crlm5ls5u+cf2v9s85eflpnwb1uybv2wa3iwbv0m9ya5yl9rs+/lx5gimjxmw5bq+mj+2ivu3ha+gxdvyi/9gzfyxymb140tvzlvi1f6md4w/2n7z6s4exqbrvebxeu+bntu+bi970farss5qttuctz8obvbhpqn8zecqn76gdofb29i9acozppl6drvyjtpp275m2pjnrlbb21wxsbgxesusyngttowwff3/uillxa2l/ead3796/t+qynksdxd1tq5jzvvrxilmn31n/umn7dvtbk3yrmo9g6+i2th2rznratnnkzzho5ps5dkpgtzd699/kpte+f7z16nxxjxmgyrigyrigyrigyrigyrigyrigyrigyrigyrigyx6j/gprw+oydgdmnaaaaabjru5erkjggg==')`}}></div>

use like this with base64 image

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

score:0

image must be in public (example with tailwind)

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

score: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)" }}
>

score:0

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>

score: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.

score:1

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

score:2

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

score:2

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

score:2

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

score:3

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

score:7

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>

score:11

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

score:14

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

score:14

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

score:23

with next@11.0 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');

Related Query

More Query from same tag