A background photo that does not eat your text

What the page does with your photo

Upload a background and three things happen. The image is re-encoded and capped, so it never becomes the reason your page is slow. A dark overlay is laid over it, strong enough that white text stays legible. And the template switches to a palette built for photographs: buttons get a surface of their own instead of floating on your picture.

The overlay has a slider because photographs differ. A night shot needs almost none; a bright beach needs a lot. Move it until the least contrasty word on the page is comfortable to read on a phone at arm’s length, then leave it there.

1. 01Choose a photo with an empty region: sky, wall, water, shadow. That empty part is where your name will sit.
2. 02Avoid faces. A face behind text competes with the text and loses, which helps nobody.
3. 03Prefer your own photographs. A stock gradient says less about you than no background at all.
4. 04Set the crop anchor: a background is cropped hardest on a vertical phone screen.

When to skip it

• When the page is mostly links. Six buttons on a photograph read as a menu taped to a window.
• When your links already have card images. Two layers of photography fight each other.
• When the only photo you have is busy. A busy background is worse than the template’s plain colour, always.
• When the page must load on bad mobile data. Even a capped background is the heaviest thing on the page.

The templates that expect one

Photo, Showcase and Noir are built around imagery and carry a background well. Whisper and Editorial are built around typography, and a photograph behind them undoes the thing that makes them good. Aurora already has its own gradient: adding a picture to it is a third layer nobody asked for.

The safest way to decide is to look. The phone preview beside the editor renders the real template with your real content, and the difference between an idea and a page is usually visible in one glance.