The default “app background” prompt produces a busy hero image that fights every button you put on top of it. Real app backgrounds are negative space with a hint of mood — they sit behind content and stay there. This walks through prompt patterns by background role (splash, settings, onboarding, empty state), the exact pixel sizes to generate at as of June 2026, and which model to pick for each job, so the result actually works in a shipped app.
TL;DR
- Prompt by role, not by “make a background.” Settings backdrops should nearly disappear; splash screens can carry mood; onboarding needs an off-center subject with room for copy.
- Generate at the target aspect ratio from the start — never square-then-crop, or you lose focal-point placement.
- Tool fit (June 2026): Midjourney v7 for atmosphere, GPT Image 2 (in ChatGPT) for instructed composition and text-safe layouts, Google Imagen 4 for photoreal multi-subject scenes, FLUX 2 for open-weight fine-tuned styles.
- Test every background behind the real UI in both light and dark mode before shipping. A background that works in one mode often disintegrates in the other.
- Commercial rights vary by tool: every paid Midjourney plan grants them, but at $1M+ company revenue you need Pro or Mega. Always read your own plan’s terms.
What this tutorial solves
Most “AI background” tutorials treat backgrounds like wall art. App backgrounds have a job: support the foreground without distracting from it. That changes the prompt vocabulary — you specify negative space, where the focal point sits, how it pairs with light/dark UI, and what aspect ratio matches the target screen. Get those four things wrong and the background looks great in your generator’s preview and broken the moment you drop a button on it.
This is for indie app developers, app and marketing designers, and product designers who keep getting “make it pop more” requests on backgrounds that already pop too much. It is most useful when you have no designer on call but need 5-8 backgrounds across a product within a week. It is the wrong approach for hero marketing images (those should grab attention, not fade) and for anything needing precise brand-mark placement (do that in vector, not pixel generation).
Before you start
- Take a screenshot of the target screen with placeholder content. You test backgrounds against real layout, not in isolation.
- Decide light mode vs. dark mode upfront, or commit to generating paired variants. A “great background” in one mode often falls apart in the other.
- Know your target sizes. The table below covers the common 2026 surfaces.
Target sizes and aspect ratios (as of June 2026)
| Surface | Native pixels | Aspect ratio | Generate at |
|---|---|---|---|
| iPhone 16 Pro Max (6.9”) | 1320 × 2868 | ~9:19.5 | 1440 × 3120 (≈2x safety) |
| iPhone 16 / 16 Pro | 1179 × 2556 / 1206 × 2622 | ~9:19.5 | 1242 × 2688+ |
| Android flagship (varies) | ~1080 × 2400 typical | ~9:20 | 1242 × 2688, then center-safe crop |
| iPad (portrait) | e.g. 2048 × 2732 | ~3:4 | 1536 × 2048 |
| Tablet / web hero (landscape) | — | 16:9 or 16:10 | 1536 × 1024 (3:2) up to 2048 × 1152 |
| Web ultra-wide hero | — | 21:9 | up to 4:1 in Midjourney v7 |
Android screen sizes vary wildly across manufacturers, so design a center-safe composition and crop rather than chasing one exact resolution. For Apple, generate slightly larger than native and scale down for crisp edges.
Step by step
-
Decide the role first. Full-bleed splash, settings backdrop, onboarding scene, or empty state. Each has different complexity tolerance — splash can be richer; settings should almost disappear.
-
Settings / utility backdrops — prompt for fade-into-background:
abstract texture, very low contrast, single color family
in the [chosen brand color] range, soft blurred shapes,
no focal point, suitable as a UI backdrop- Splash screens — prompt with placement awareness:
[brand mood: calm/energetic/playful] scene, clear focal
point in the top third only, lower 60% open for text
overlay, gradient compatible with both light and dark UI- Onboarding — prompt for illustration with breathing room:
[illustration style: flat/watercolor/3D minimal], single
subject doing [related action], generous negative space
on left and bottom for text and buttons, friendly tone- Empty states — prompt for friendly minimalism:
minimalist line illustration, single subject (e.g. plant,
character, abstract shape), friendly and calm tone,
lots of white space, no surrounding details-
Generate at the target aspect ratio from the start. In Midjourney v7, append
--ar 9:20for phone full-screen (the--arvalue can’t contain decimals, so use whole-number ratios). In GPT Image 2, request a portrait size like1024 × 1536; its valid range requires both edges as multiples of 16 and a long-to-short ratio no greater than 3:1. Don’t generate square and crop — you’ll lose the focal-point placement. -
Place the result behind your actual UI screenshot. If any element competes with a button or text block, regenerate with stronger negative-space language. Then repeat the test in the opposite color mode.
Which model for which background (June 2026)
| Model | Best for | Aspect-ratio control | Notes |
|---|---|---|---|
| Midjourney v7 | Atmosphere, gradients, mood | --ar up to 4:1 | Strongest default aesthetic; v7 uses ~2x the GPU time of v6 |
| GPT Image 2 (ChatGPT) | Instructed composition, layouts that reserve space for text | Portrait/landscape sizes up to 3840px | Strong text rendering; does not output transparent PNGs — remove background in post if needed |
| Google Imagen 4 | Photoreal, complex multi-subject scenes | Standard ratios via AI Studio / Vertex AI | First-class text rendering; reached top tier in its April 2026 release |
| FLUX 2 | Very specific fine-tuned styles, open-weight workflows | Wide ratio support | Best when you want to run or fine-tune locally; check the variant’s license |
Pick by your brand’s default style. For most app backgrounds — soft gradients and quiet texture — Midjourney v7 or Imagen 4 land closest with the least prompting. When the background must reserve a specific text zone, GPT Image 2 follows that instruction most reliably.
Quality check
Run all five before you ship a background:
- Focal points are NOT where your UI text or buttons live. Overlay the real UI; if they collide, the background lost.
- Aspect ratio matches the target device. A 16:9 background stretched onto a 9:19.5 phone looks broken.
- Tested in both light and dark mode if your product supports both.
- The interest level is low enough to be ignored after half a second of looking at the screen. If users notice the background more than the content, regenerate.
- Saved to a background-library doc with image path, prompt, model, target screen, and light/dark variant. After 20 entries you’ll have a reusable personal style.
Worked example: meditation app onboarding
Goal: an onboarding screen for a calm-mood meditation app, 9:20 phone, shipping light and dark.
- Prompt Midjourney v7:
soft watercolor, single figure sitting cross-legged on a hilltop, soft pastel sunset, generous empty space top and bottom, no surrounding details --ar 9:20. - Generate 8 variants. Pick the one with the most empty top and bottom — not the most “interesting” one.
- Drop it behind the real onboarding UI in light mode. Squint. If the buttons disappear into the art, the background is too busy.
- Ask for the dark variant in the same session:
now regenerate in a dark variant: same composition, deeper blues, lower brightness. - Confirm both modes keep the headline and CTA readable, then export at the size from the table above. Both ship.
Common mistakes
- Focal points everywhere. UI can’t compete with a detailed scene. Strip to one focal point or none.
- Wrong aspect ratio out of the gate. Cropping square images to portrait loses your focal-point placement — set the ratio in the prompt.
- High contrast where text lives. Text becomes unreadable; test with the worst-case overlay.
- One background for everything. Onboarding, settings, and empty states have different jobs and need different shapes.
- Generating in light mode only. Dark mode flips the contrast math — test, or generate paired variants.
- Skipping the “behind real UI” test. Backgrounds always look better in isolation than in production.
Advanced tips
- For light + dark mode, generate paired versions in one session so composition stays identical and only brightness/hue shift.
- Keep prompts deliberately understated. “Subtle” beats “stunning” by a wide margin for backgrounds.
- For animated backgrounds, generate the still first, then add subtle motion with an image-to-video tool (Runway, Pika, Kling). Never start with motion.
- For data-heavy screens (dashboards, lists), use a near-flat single-tone background and save mood for splash and onboarding only.
- To keep backgrounds consistent across screens, feed one approved background as a reference image — most models accept an image prompt — and generate siblings from it.
FAQ
- Can I use AI backgrounds in a paid app?: Generally yes if your tool’s commercial terms allow. As of June 2026, every paid Midjourney plan (Basic $10, Standard $30, Pro $60, Mega $120) grants commercial rights, but companies over $1M annual revenue must be on Pro or Mega. Free Midjourney trials grant no commercial rights. Always confirm against your own plan.
- What size should I generate for iOS and Android?: For the iPhone 16 Pro Max, native is 1320 × 2868 px (~9:19.5); generate a bit larger and scale down. Android varies by maker, so design a center-safe composition and crop. See the size table above for common targets.
- Which model is best for app backgrounds?: Midjourney v7 for atmosphere and gradients, GPT Image 2 for layouts that must reserve a text zone, Imagen 4 for photoreal scenes, FLUX 2 for fine-tuned or local workflows. Try two and keep the one whose default style is closest to your brand.
- How do I keep backgrounds consistent across screens?: Use a reference image. Feed one approved background as an image prompt and generate siblings, then store the winning prompt as a template and swap only the mood and color next time.
- Can I get a transparent background from these models?: GPT Image 2 does not output transparent PNGs as of June 2026 — generate on a solid backdrop and remove it in post, or use a model/tool that supports alpha output directly.
Related
- AI Image Prompt Basics
- Brand Visual Direction with AI
- AI Poster Layout
- Write App Store copy with AI that converts — pair good backgrounds with a listing that actually drives installs
- AI Portrait Generation Tutorial
- Style consistency in images
- AI Album Art Tutorial: Cover Design That Reads at Thumbnail
- AI Fantasy Character Design Tutorial: From Sheet to Splash
- AI Fashion Lookbook Tutorial: Consistent Model, Different Outfits
External references: Midjourney aspect-ratio docs and the iPhone 16 Pro Max tech specs for exact device pixels.