Text behind image

How to put text behind an image

1. Drop a photo in

Drag one onto the panel, click to choose, or paste a screenshot. The cutout starts by itself. The first one downloads a model: 12.4 MB for people, 84 MB for everything else, and after that the browser keeps it, so the second photograph needs no download at all and the tool works with the network off.

2. Drag the words where you want them

A text layer is there already, sized to the picture. Drag it, nudge it with the arrow keys, or hold Shift with them for bigger steps, which is how you line something up against an edge without fighting a mouse. Add more layers for more words.

3. Save it at full resolution

Pick PNG, JPG or WebP and press Save. You get the picture back at the size you dropped in, with the text drawn at that resolution rather than scaled up from the preview.

What you can hand it

PNG, JPG, WebP, AVIF, GIF and BMP: anything this browser can decode, at any size. A picture with one clear subject against a background that does not look like it works best; that is what the models were trained on. A photo that is already a cutout, with its own transparency, works too: the model simply finds the same subject again.

The picture, and moving the words on it

The canvas shows a preview, fitted to the panel, and the selected layer is outlined so you can see what you are about to move. Click a word to select it, drag it anywhere, and use Centre across and Centre down when you want it exactly in the middle rather than nearly. Everything is stored as a percentage of the picture, so what you arrange against the preview is what gets drawn on the original.

The effect is three layers deep

Underneath is the photograph exactly as it arrived. Over it are the words. Over them is the subject: the same photograph again, with everything that is not the subject made transparent. That third layer is the whole trick: without it the words sit flatly on top of the picture and the effect does not read.

Which is why each layer has a Depth of its own. A word set to In front is drawn after the subject instead, which is what you want for a caption that should cover them rather than pass behind.

Look: the six presets

Poster is heavy and tight: the default look of the effect. Outline hollows the letters out so the photograph shows through them. Glow puts a soft halo behind the type, which is what rescues white text on a pale background. Wide is light and spaced, for a word that runs the width of the picture. Ghost drops the opacity and blends it into the photo. Stamp multiplies, so the words take the colour underneath them.

A preset changes only how the words are set. Where you dragged them, how far you rotated them and whether they sit behind or in front all survive it, so you can try all six against a layout you have already positioned.

Text: the words and how they are set

Line breaks work: type them and the lines stack, with Line height deciding how tightly. Spacing goes negative, which is what display type usually wants: at large sizes the default gaps between letters look loose.

Nine families are built in and you can add your own from a font file. That file is read in the browser like the photograph is, and goes nowhere.

Colour: the group that decides whether it is legible

Fill and opacity are the obvious pair. Outline and Shadow are the ones that matter on a busy photograph: a one-point outline in the opposite colour will hold a word together over a background that is changing under every letter, and a soft shadow does the same job more gently.

Blend is how the words mix with the photo underneath. Multiply keeps the shadows and darkens; Screen keeps the highlights; Overlay and Soft light let the photograph's own texture come through the letters.

Cutout: fixing the edge without running anything again

No segmentation is perfect, and the two things that go wrong are a thin halo of old background left around the subject, and an edge that is too hard against a soft photo. Both are fixed on the matte rather than by running the model again.

Edge moves the boundary in or out by a pixel or two. Pull it negative to eat a halo. Soften blurs the boundary so it sits naturally against a shallow depth of field. Both redraw instantly, because the model has already done its work and these are arithmetic on the mask it produced. Hold to see the photo shows the original underneath, which is the only honest way to judge whether the edge is right.

Keyboard shortcuts

Arrow keys nudge the selected layer; Shift with them moves five times as far. Cmd or Ctrl with Z undoes, and Shift with that redoes. Esc leaves full screen. Ctrl or Cmd with V pastes a photo straight from the clipboard, which is usually where a screenshot already is.

Saving, and what the file is

PNG keeps every pixel and any transparency. JPG is smaller and has no transparency at all, so anything uncovered is filled white rather than left black. WebP sits between them.

Whichever you pick, the picture is rendered at the size of the original, not at the size of the preview on screen. A 4000-pixel photograph comes back 4000 pixels wide, with the text drawn at that resolution rather than scaled up from the preview.

What this tool will not do

It will not cut out two subjects and let you put text between them: the matte is one subject against everything else. It will not animate, and it will not keep your design between visits, because nothing about your session is stored anywhere. And it cannot fix a photograph where the subject and the background are genuinely the same colour and texture; no segmentation model can, and the honest answer is a different photo.

Why this one wants a desktop

It runs on a phone and we have not crippled it. But the model is a real download, the inference is real work, and dragging a word precisely is a thing fingers are bad at. On a phone use the People model and expect the first photo to take a while. On a laptop it is a second or two.

What "nothing is uploaded" means here, and how to check

It means the photograph is read by this page, held in the tab, and drawn to a canvas. No request carries it anywhere. What the network does show, on the first run, is a download from a CDN: the model weights, coming to you.

That is checkable rather than a promise. Open your browser's developer tools, switch to the Network tab, and drop a photo in. You will see requests to the CDN for the model and nothing at all carrying your picture. Then turn the network off entirely and drop in another photo, it still works, which is only possible if nothing was being sent.