It's important to note that if a background image is too short for a page, it will automatically stretch/zoom to adapt. This will play a huge role in understanding how to create a seamless-looking background. Before you continue, please read this "How to create a background for long pages" article to avoid any confusion.
Keep scrolling to also view some design example ideas!
STEP 1:
The first step to creating a seamless background effect/illusion is to avoid having any objects or graphics cut off at the top or bottom edges. This will ensure a smoother transition into the next background that follows as seen in the example below.
Feel free to play around with graphics "bleeding" onto the side edges instead, but be mindful of where the text box will be.
STEP 2:
Upload the background image that you created for this specific page. This may require a few trials and errors to ensure it's correctly placed how you want it.
When you're satisfied with how it looks, proceed to the next step.
Tip: If your background image setting is set to "Contain", this will have a higher chance of translating optimally for mobile.
STEP 3:
Duplicate a copy of this background image so you can now create versions for short and long pages to readily use over and over.
To do this, adjust the height of your background image by either reducing or extending the length but ensuring the graphics stay at the same size scale. (Unless of course, that design preference is intentional.) This matters where the size ratio needs to look the same across as seen in the example below.
Feel free to move around the graphics if necessary.
