In Applaud, you can highlight important pages by adding a custom background image. A specific background helps differentiate one page from others, reinforces your brand, and adds visual context that keeps employees engaged while they navigate content.
Global vs Page Backgrounds
There are two ways to control page backgrounds:
Global background color – set in Brand settings. This applies the same color to every page by default.
Page background image – set in Page settings. This lets you add a custom image to a single page, overriding the global color.
Background Image Repeat Options
When you add a background image, you can control how it repeats across the page. The table below shows each option, how it behaves, and when to use it.
| Option | What it does | Example (10×10px image) | Best for |
|---|---|---|---|
| no-repeat | Shows the image once, at its original size. | N/A | Hero images, gradients, banners. |
| repeat | Tiles the image both horizontally and vertically to fill the whole page. | Repeats every 10 pixels across and down. | Small patterns or textures. |
| repeat-x | Tiles the image horizontally across the page, but not vertically. | Repeats every 10 pixels across; does not repeat vertically. | Horizontal bands or dividers. Use a wide image for smooth bands. |
| repeat-y | Tiles the image vertically down the page, but not horizontally. | Repeats every 10 pixels down; does not repeat horizontally. | Vertical stripes or sidebars. Use a tall image for a continuous effect. |
We’ll explore each option below with examples.
No-repeat: Full-screen images
A full-screen image covers the entire background of the page. This option works best for strong, impactful visuals such as banners, gradients, or hero images.
Things to Keep in Mind
- Image Size: Use a 16:9 aspect ratio, for example, 1920 × 1080. Be aware that some edges may get cropped on smaller devices, so keep the focal point in the middle.
- Image Quality: Save at 144 dpi and compress for faster loading.
- Readability: Avoid busy designs behind text and add a soft overlay if needed.
- Light vs. Dark Backgrounds: Light backgrounds usually improve readability; dark ones can make text harder to read.
Example of a full-screen image filling the page with a central design.
Example: Full-screen with gradient fade
You can also use a full-screen image with a gradient that fades into the page background. This creates a smoother transition and makes text easier to read. This option is effective if you want the impact of a background image without overwhelming employees.
Example: A full-screen image fading into the page background.
| Image | How it looks |
|---|---|
Example: Subtle full-page gradient
A pure gradient background creates a clean, modern look with excellent readability.
What to look for:
- Choose adjacent hues or light-to-neutral transitions so cards, forms, and tables remain clear.
- Gradients are forgiving across screen sizes and help avoid cropping issues.
Example: A subtle full-page gradient background.
| Image | How it looks |
|---|---|
Repeat: Tiling a smaller image
Tiled backgrounds repeat a smaller image across the page. This option is useful when you want subtle texture or light branding without using a large image.
Tiling tips:
- Use seamless images to avoid visible joins.
- Keep tiles small for faster loading.
- Subtle, low-contrast patterns work best, as they don’t distract from the content.
Example: A small 10×10px image repeating in both directions.
| Image | How it looks |
|---|---|
Larger repeat pattern
Using a larger image means it repeats less often, creating a more subtle effect. This keeps the pattern visible without overwhelming the page.
Example: A larger repeated image with subtle texture.
| Image | How it looks |
|---|---|
Repeat-x: Horizontal bands
Using a wide image creates the effect of a horizontal band across the page. The image tiles left to right but not vertically.
What to look for:
- Best for horizontal dividers or stripes.
- You can use a wide enough image so the band appears smooth. Narrow stripes can become jarring.
- Example: A horizontal image repeating across the page.
| Image | How it looks |
|---|---|
Repeat-y: Vertical stripes
Using a tall image creates the effect of a continuous vertical pattern. The image tiles downward but not horizontally.
What to look for:
- Best for sidebars or vertical accent stripes.
- Use a tall enough image so the stripes look continuous. Short images will repeat further down the page.
Example: A vertical image repeating down the page.
| Image | How it looks |
|---|---|
Best Practices for Readable Backgrounds
- Keep text readable by using high contrast between text and background.
- Add a soft overlay if your background image is busy.
- Optimise file formats: use PNG for WebP for photos, and PNG or SVG for flat graphics.
- You should always preview your page on desktop, tablet, and mobile to check spacing and contrast.
Tasks you can perform