Background Image on homepage

Support
1

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.

2

Hey @dudemancaleb

Check out background-image CSS reference on MDN

3

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

4

Check out this sample on MDN

5

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

6

Can you share what you have?

7
8

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

9

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:

      background-image:
        linear-gradient(to bottom, rgba(255,255,0,0.5), rgba(0,0,255,0.5)),
        url('https://alltracksacademy.com/wp-content/uploads/2015/07/whistler-season-2014-alltracks-037-sf.jpg');
    </style>
10

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">
  <head>
    <style>
     div.withBgImage {
       background-image: url("background.jpg");
     }
    </style>
  </head>
  <body>
    <div class="withBgImage">This will have a background image.</div>
    <p class="withBgImage">This will NOT have a background image.</p>
  </body>
</html>
1 Like
11

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