Next.js Discord

Discord Forum

Image for background

Answered
New Zealand posted this in #help-forum
Open in Discord
New ZealandOP
Im making this website, and I need an image for a background. Im not sure how id do this though. Could someone help me do this?
Answered by Patterdale Terrier
If you're using tailwind, just use the class name bg-[url('/path-to-your-image.jpg')]
View full answer

37 Replies

I can help you
are you there?
New ZealandOP
Im here
Thrianta
could you let me know more detail what you want?
New ZealandOP
I have an image of the old windows aero background that I want to set as the background of a page. I dont really know how to do this, as I am somewhat new to Next.js
Thrianta
can you show me screenshot?
New ZealandOP
Uh we havent decided on the image, but I can show you one
Thrianta
k
I can help you
so where are you from?
New ZealandOP
Does that matter..?
@New Zealand Does that matter..?
Thrianta
no
New ZealandOP
So how do I..?
Thrianta
hello
are you there?
I will guild you to fix your problem
are you ready?
New ZealandOP
Yeah
@New Zealand Yeah
Thrianta
check your DM
Thrianta
hi @New Zealand
are you there?
New ZealandOP
Im a lil busy
Thrianta
when you are ready, let me know
New ZealandOP
Kk
@Thrianta when you are ready, let me know
Patterdale Terrier
@Thrianta sounding so much like a scammer. If you want to help, help here
I got a dm and a friend req from them.
Patterdale Terrier
@New Zealand to make an image the background of an element, just use the background image CSS property

background-image: url("assets/image.png")
Patterdale Terrier
If you're using tailwind, just use the class name bg-[url('/path-to-your-image.jpg')]
Answer
New ZealandOP
Ooh okayy. Thanks.
@New Zealand Ooh okayy. Thanks.
Saint Hubert Jura Hound
The above answer is wrong imo. Nextjs has built in image optimization which u should take advantage of when possible. Even for background images it can be useful
https://nextjs.org/docs/app/api-reference/components/image#fill
@Saint Hubert Jura Hound The above answer is wrong imo. Nextjs has built in image optimization which u should take advantage of when possible. Even for background images it can be useful https://nextjs.org/docs/app/api-reference/components/image#fill
Patterdale Terrier
I disagree that it's wrong. CSS background images are still the correct way to create CSS backgrounds. Using <Image fill={true} /> is an alternative when you specifically want Next.js image optimization,... but it doesn't replace background-image 🤷‍♂️
Or why would you prefer background-image