App Background Preview
Runs in your browser — your files are not uploaded to use this tool.
Save this tool
Keep App Background Preview handy
Use your browser's Share menu, then “Add to Home Screen”.
See how much of a background image survives on every phone and tablet
- Drop in the image you are planning to use as a fullscreen background.
- Pick the content mode your app uses — fill is the usual one for backgrounds.
- Read the safe area at the top: that rectangle is visible on every device shown.
- Scan the grid for the tightest crop, and move your subject inside the safe area if it does not survive.
About this tool
A fullscreen background is almost never shown whole. The screen has one aspect ratio, your artwork has another, and something has to give — so the subject you carefully centred survives on the simulator you tested and loses its head on somebody's iPad. This shows you the damage before you ship it. Drop an image in and every device is drawn at once, portrait and landscape, showing the exact slice of your artwork that reaches the screen. Above the grid is the number that actually matters: the rectangle visible on every device you are checking. That is where a logo, a face or a line of text can go and survive everywhere. Content modes are covered too, because a background set to fit rather than fill has a completely different failure — bars down the sides instead of a crop — and the two get confused constantly. Turn on safe areas and the notch, status bar and home indicator are shaded on top, since a background is drawn edge to edge and the system furniture sits over it rather than pushing it out of the way. Nothing is uploaded: the image is read and drawn in your browser, and the maths is pure geometry.
Frequently asked questions
Why are devices grouped by aspect ratio rather than by model?
Because two phones with the same shape crop a background identically, whatever their pixel counts — the crop is a similarity transform and resolution cancels out. Listing forty models would produce forty rows and about four distinct answers, and the list would be out of date every autumn.
What is the safe area, exactly?
The part of your image visible on every device you are checking, in both orientations. It is an intersection rather than an average, because a subject cropped on one device out of seven is cropped — averaging would hide precisely the case you are looking for.
Why do the notch and home indicator not shrink the image?
A fullscreen background is drawn edge to edge, behind everything, so system furniture covers it rather than cropping it. That is a different question from the crop, which is why safe areas are a separate toggle and are shaded on top of the preview instead of being cut out of it.
Which content mode should I use for a background?
Fill, almost always — it covers the screen and crops the overflow. Fit shows the whole image but leaves bars, stretch distorts it, and center shows it at native size. The tool reports which of those is happening so a mistake is visible rather than subtle.
Is my image uploaded anywhere?
No. The file is read in your browser to get its dimensions and to draw the previews, and it never leaves the tab. The API version does not take an image at all — it works from width and height alone, so you can check a shape before the artwork exists.
Help improve this tool
Found a bug, want a change, or need a tool we don't have?
You have an unsent draft.
Thanks — that's with us. You'll find the reply in your inbox.Go to my messages