You can easily update the page background image, colors, and styling to align with your own corporate branding.
Full-screen images (no repeat)
- The image will scale to fill the entire page background.
- Optimal sizes vary depending on the content shown on each page. In simple terms, pages with numerous blocks or large lists will require images that are either square or taller than they are wide.
- Most pages will work okay with a 16:9 ratio ideally exported 144dpi and run through an optimization tool called tinypng.com (note, Applaud will also optimize the size of images, but the better optimized you can make the source image, the smaller the file size will be and quicker the download will be as a result.
- Light images work best because certain parts of the UI will not show up against dark backgrounds, including page titles, dark text in rich text blocks with transparent backgrounds, page-level buttons, block-level buttons such as settings cogs when the block has a transparent background.
Tiled images (repeat)
The image will be displayed at the designed size and be repeated constantly until the pattern fills the whole screen background.
- repeat - a 10x10px image will repeat every 10 pixels horizontally and also every 10 pixels vertically.
- repeat-x - a 10x10px image will repeat every 10 pixels horizontally only. It will not repeat vertically.
- repeat-y - a 10x10px image will NOT repeat horizontally. It will repeat vertically every 10 pixels.
Increasing the image size also increases the repeat step, so a 96x96px image will repeat every 96px, and so on.
Repeated images can create clever patterns with minimal load times, as the image is only loaded once.
Fullscreen (no repeat) example - gradient fading into page background
This is an example from an onboarding page. As the page title has been disabled here, and a custom rich text block is used with white text, we can use an image that is quite striking at the top, but fades quickly into a solid color. This is designed to give visual impact “above the fold” while minimizing distractions lower down the page. The image is set up with an image and a gradient overlay, which has been colored to match the background color used in the theme settings. This helps retain tonal consistency when switching between pages with background images and those without them.
How it looks
Repeat example
This is an example of an image repeating on both the x & y-axis. See how a very small but cleverly crafted image can result in a distinctive pattern.
How it looks
Repeat X / Y examples
We've deliberately used garish images in this example to illustrate how the repeat x / y feature works.
How it looks
How it looks
Larger repeat example
This is an example of a more unusual and subtle repeated image. The image is crafted in such a way to allow slabs of texture to be repeated over the whole background.
How it looks
Subtle full-page gradient example
Useful for adding subtle but effective interest and depth to a page.
How it looks
Tasks you can perform here: