For those who don't know, you can change PS's overall website background in the settings menu on the top right. The battle background is distinct from this, and this guide will show you how to change that.
(Note: You'll have to manually set the background in each new battle. To get around this, a browser extension can be used, but I'm not familiar with those so I haven't included them in here.)
1. Creating the Custom Background
You'll want to use image editing software for this. My personal choice is paint dot net, but of course there are many other options.
Overall the image size is 700x500, but some of that is unused space. See the following image for details:
(Note: I might be off by a little bit on these values; I've determined them by trial and error.)
Every area marked in light green here won't display in the battle. It's still necessary to include these areas, because otherwise your background will appear off to the side.
Here's a step-by-step guide to turning your image of choice into a background:
1. Resize your image to 438 width x 360 height. This will be the main battle background.
2. Change the canvas size to 640 width x 360 height, and set the anchor point in the middle. This should create two sections to the left and right of the main background. These will be the trainer backgrounds, which can be customized as needed. Note that PS automatically applies a transparency filter to this part, so colors will show up more faintly than in the original image.
3. Fill in the trainer backgrounds with whatever you want. For this tutorial, I'll set the left side to solid orange, and the right side to solid purple. When using the paint bucket, remember to disable anti-aliasing; otherwise, the borders will look messed up.
(You can also just start with a 640x360 image, and have the trainer backgrounds be part of the main background, like how PS does it by default.)
4. Next, create the unused buffer space. We'll also do this with the Change Canvas Size operation. Make each of the following changes, with the following anchor points:
a) Change to 640 width x 450 height, with the anchor point on the bottom.
b) Change to 640 width x 500 height, with the anchor point on the top.
c) Change to 690 width x 500 height, with the anchor point on the right.
d) Change to 700 width x 500 height, with the anchor point on the left.
And you're done!
2. Change the canvas size to 640 width x 360 height, and set the anchor point in the middle. This should create two sections to the left and right of the main background. These will be the trainer backgrounds, which can be customized as needed. Note that PS automatically applies a transparency filter to this part, so colors will show up more faintly than in the original image.
3. Fill in the trainer backgrounds with whatever you want. For this tutorial, I'll set the left side to solid orange, and the right side to solid purple. When using the paint bucket, remember to disable anti-aliasing; otherwise, the borders will look messed up.
(You can also just start with a 640x360 image, and have the trainer backgrounds be part of the main background, like how PS does it by default.)
4. Next, create the unused buffer space. We'll also do this with the Change Canvas Size operation. Make each of the following changes, with the following anchor points:
a) Change to 640 width x 450 height, with the anchor point on the bottom.
And you're done!
2. Setting your image as a battle background
PS pulls its backgrounds from links, so you'll first want to upload your background image to an image hosting service of some sort. Discord can do this (note that it's unreliable long-term), and there also exist other options like Imgur.
Next, copy the image link (not the image itself).
Finally, go to the PS battle you want to use the background, right click, and click "Inspect". You should see a page like this pop up:
Scroll upward until you reach the "backdrop" line (or maybe scroll downward if you're put at a different starting spot; the line you're looking for is about 2/3 of the way down the page):
Double-click to modify it, and replace the PS sprite link with the link you copy-pasted. Then, press Enter to save it.
Your background should show up in the battle! (Note how the trainer backgrounds appear lighter here than in our original image)
Thanks for reading! Hopefully this guide was helpful.
If you've made battle backgrounds, feel free to share them in this thread so others can use them.
