score: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>
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.
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');
Source: stackoverflow.com
Related Query
- Next.js background-image css property cant load the image
- How to Lazy load the background image inside the inline style property (React)?
- How to elongate a css background image to the right without stretching and distorting it?
- Can't place a background image in next JS and Tailwind CSS
- Module parse error when trying to load background image in a css element
- React path to public folder in css background image
- Gatsby: Set background image with CSS
- React Native - Why we use the tintColor property for Image component?
- React Native - How to load local image using the uri in Image Component?
- React js css class background image not visible
- Using a default image on load of the page, then overwrites it
- How to load background images from css in React and NextJS
- Set background image url using inline css in react js
- Using material-ui's APIs, how do I set a background image in the body?
- Why I cant see image in the example of material -ui-v3.2.0 "Image avatars "
- react, css) transition css for fade in and out, when background image is changed with className
- How can I dynamically change the value of a CSS property in React?
- How to make the background image change every X seconds in React?
- BlueprintJS is not loading its icon CSS module, but is able to load the core CSS module
- While Loading my site on the client's web page there occurs css property clash issues
- Can't load a local background image in ReactJS
- Change the background image dynamically
- React JS: Image size flickers on reload with object-fit: cover CSS property
- Adding CSS background image to Material UI theme
- How can I pan the background image while it's zoomed in?
- Tailwind CSS image absolute using The Next.js Image component
- How do I add the same CSS property (e.g. background-image) multiple times with React?
- webpack file-loader does not load background image
- Next JS Image Component works for static image files, but dynamic urls fail to load images
- import image , css and sass file in next js
More Query from same tag
- Cannot read properties of undefined (reading 'map') at NFTContainer for nft collection
- axios post request to send form data in reactjs
- Simulate localStorage data in test
- File attachments for redux-form and elixir/phoenix as backend API (serialization issue)
- Front-end/ReactJs environment based configuration
- Pass parent's attributes to child component with children method
- ReactJS PrivateRoute that accesses URL parameter
- Generate schema.json with GraphiQL or GraphQL endpoint
- Can't get upload image value by using React hook form
- Reflux: having multiple components access the same Store
- ReactJS and making concurrent API calls DRY
- Video Element Resets on Re-render
- react-router: 'Invariant Violation: Invalid tag: {HelloWorld}', while the component is right there
- Passing a variable from Child component to Parent component
- How do I display data sent from the express router in my react-component?
- How to wrap 2 or more menu items to use them in one condition, using React and ant design?
- react redirect to another page after login
- Manifest.json Unexpected Token
- Including React as a webpack external results in cannot find module 'react'
- I am learing react.js but i am finding it difficult to understand how the react app will work when deployed?
- backgroundImage style not loaded - react js
- Set state timeout in react project
- Triggering form's submit event manually in React doesn't check required inputs
- setState() Syntax seems wrong
- Reverting to default react select props based on a condition in React-Select
- React Typescript - Error Objects are not valid as a React child
- useState does not support a second callBack, what could be the easy fix?
- Retrieve values from db to drop down in ant form
- webpack terminal command results in /config/webpack/development.js not found
- useRef hook for dynamic "onOutsideClick"?