how to make background image using next.js image component?
Unanswered
American Chinchilla posted this in #help-forum
American ChinchillaOP
Hello, ive tried using position absolute with next.js image componeny and fill property but it just doesnt work. When i use normal html img it does work. The only solution i can find is not using next image component but the css background image propery.
10 Replies
American ChinchillaOP
Is there really no way to use background images using next image component?
@American Chinchilla Hello, ive tried using position absolute with next.js image componeny and fill property but it just doesnt work. When i use normal html img it does work. The only solution i can find is not using next image component but the css background image propery.
German yellowjacket
send code snippet
Sun bear
you can do this using css
set the style of
Image component to be absolute or fixed give it a lower index than the elements that should be visible on top of it, and add: top-0, left-0, size-full to go over the entire screen.@American Chinchilla Is there really no way to use background images using next image component?
you can directly [do this](https://nextjs.org/docs/app/building-your-application/optimizing/images#background-image):
And then use the background component wherever you need
export default function Background() {
return (
<Image
alt="Mountains"
src={mountains}
placeholder="blur"
quality={100}
fill
sizes="100vw"
style={{
objectFit: 'cover',
}}
/>
)
}And then use the background component wherever you need
American ChinchillaOP
@B33fb0n3 thanks everyone, i will try it, cureently im using background css property which works perfectly but il try this
The problem is because trying to overlay text on top
And centering the content
I can do it in normal css and html img
But for some reason it difficult to do the same with next image using the fill prop