Background Image on homepage

as you can probably guess from the title I don’t know much about coding. I have to make a website for class and I was wondering what the easiest way is to add a background image on the home page (index.js). Right now it is just white and I don’t know how to change it. I’ve tried using resources from other sites but I don’t know what to do really. Any help is appreciated.

Hey @dudemancaleb

Check out background-image CSS reference on MDN

thanks. another stupid question but where would i put that piece of code to change the background?

Check out this sample on MDN

thank you! that helped a bit, but do you know where I put the code? I tried putting it in but the background doesnt change

Can you share what you have?

You are best to look at Next.js specific documentation. Here are three I believe you might find useful

As well as the following blog post

I’m going to be honest that is all a little confusing to me. I tried reading it and implmetning it but still can’t get it to work. I’m putting this in the header and it isn’t changing the background:

        linear-gradient(to bottom, rgba(255,255,0,0.5), rgba(0,0,255,0.5)),

IMHO @dudemancaleb, I suggest you get a solid grounding in HTML, CSS, and JavaScript, learn how to set a background-image using these basic underlying technologies.

Try this example:

<!DOCTYPE html>
<html lang="en">
     div.withBgImage {
       background-image: url("background.jpg");
    <div class="withBgImage">This will have a background image.</div>
    <p class="withBgImage">This will NOT have a background image.</p>
1 Like

Thanks for those awesome suggestions, @coelmay :netliheart:

@dudemancaleb, a Netlify project you may be interested in is Jamstack Explorers. It is a learning platform that has various missions to help you develop your skills surrounding frameworks, APIs, and various workflows. You can check it out here:

1 Like