Add a Background

Learn how to create an awesome online soccer game!

Find an Image for the Background of your game

1. Upload an Image to Repl
  1. Find the downloaded images. Need help?
  2. Open the asset folder in repl, click: code > client > asset
  3. Click and drag your files into this folder. Make sure your files are named something very easy and obvious (it is best to not use spaces or symbols), for example “zombies.png” or “shark.png”. You will resize the images within the code, so don’t worry if it seems to big or small right now.

2. Go into the preload function in game.js and add a new image named after the new character set.

g.loadImage('background', 'grass.jpg');

3. In game.js, Add drawBackground function in the create function


g.drawBackground('background', 0.8);

Download your zip, and upload it to, and you should have a background!

Add More Characters

Need Help?

Proofread your code, check with your team and classmates, and if you’re still stuck!

Click Here for Help