This guide covers everything about page backgrounds in the AirMason editor: how to set or change a background image, what size your image should be, how to design backgrounds for long pages or a seamless look, how to keep text readable over a background, and how to add a border.
In this article:
Setting or changing a background image
Step 1: In the editor, go to the page where you want to change the background, then click the "Page Style" pencil icon in the toolbar on the right-hand side of the page.
Step 2: The style panel opens on the left. Click "Background" to expand it. Under "Use a photo", click the "Select" plus icon.
Step 3: Choose where your image comes from. The image window has five tabs:
Library – pick an image you've already uploaded to your organization's library.
Upload – select or drag and drop an image from your computer (JPG, JPEG, PNG, BMP, GIF, SVG, WEBP or WEBM, up to 10MB).
Search the web – type a keyword and press Enter to browse royalty-free stock images.
You'll also see Embed Link (paste a link to an image hosted online) and AI image (generate an image from a text prompt).
Step 4: Click the image you want, then click "Confirm" to apply it.
Step 5: Voila! Your background is now set.
Tip: Once a photo is applied, a Background Size dropdown appears under "Use a photo". It defaults to "Cover"; switch it to "Contain" if you want the whole image to stay visible rather than fill the page.
Image dimensions
Background images
The default size for a background image is 1425 pixels wide x 680 pixels tall. This is the standard size of a new page when you insert one. As the page gets longer, and depending on the image setting you choose, the background image will stretch or zoom to adapt to the new size.
Full-width images
For full-width images, it's best to crop or contain your image within 1425 pixels x 680 pixels.
Tip: If you'd rather your background didn't stretch or zoom on longer pages, see the next section on creating a background for long pages.
Creating a background for long pages
When uploading a background image, the minimum width should be 1425 pixels, with a height of at least 680 pixels. When a page becomes longer than this default size, the background image will automatically stretch or zoom to adapt. If that's not what you want, here's how to design around it.
Photos
To accommodate a longer page, upload a photo with a longer height. Think vertical portrait orientation, which fits better, rather than a horizontal landscape that would stretch.
In the example below, we show what a long photo background looks like when it's applied to a shorter page, and then what happens when it's applied to a longer page. Notice that no stretch or zoom happens, because more of the bottom of the photo is simply revealed.
Note: Play around with cropping. It may take a few trial-and-error attempts to get it perfect.
Graphics
For backgrounds where you have the flexibility to adjust the graphics, simply extend the height of the canvas to accommodate a longer page. The graphics themselves should stay at the same size scale.
In the example below, we show how a stretch or zoom occurs when the exported background isn't long enough, compared to when it's correctly exported.
Creating a seamless-looking background
Remember that if a background image is too short for a page, it will automatically stretch or zoom to adapt (see the section above). Keeping this in mind is key to creating a seamless-looking background across pages.
Step 1: Keep the top and bottom edges clean
The first step to creating a seamless background effect is to avoid having any objects or graphics cut off at the top or bottom edges. This ensures a smoother transition into the background on the next page, 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 and test
Upload the background image you created for this specific page. This may take a few tries to get it placed exactly how you want it. When you're satisfied with how it looks, move on to the next step.
Tip: If the Background Size dropdown (under "Use a photo" in the Background panel) is set to "Contain", the image has a higher chance of translating well on mobile.
Step 3: Create versions for short and long pages
Duplicate a copy of this background image so you can create versions for short and long pages to reuse over and over.
To do this, adjust the height of your background image by reducing or extending the length, while making sure the graphics stay at the same size scale (unless that design choice is intentional). This matters where the size ratio needs to look consistent across pages, as seen in the example below. Feel free to move the graphics around if needed.
Making text more legible on a background
If your text is too light or too dark against a background (or vice versa), you can add an overlay to improve contrast.
1. On the selected page, click the "Page Style" pencil icon in the right-hand toolbar, then expand "Background" in the panel that opens on the left.
2. Option one: switch on the "Darken background" toggle. This adds a subtle default black overlay.
3. Option two: switch on the "Gradient background" toggle just underneath. You can set your own colour values and angle instead of the default black-to-white fade.
4. Voila!
Compare the page in Step 5 above (no overlay) with the darkened version in step 2 here. Feel free to keep playing around to see what looks best.
Adding a border
1. Click the "Page Style" pencil icon in the right-hand toolbar.
2. Expand "Background" in the style panel.
3. Scroll down and switch on the "Border" toggle, then choose the colour you want your border to be.
4. You'll then see a border appear around your page.
