Codex Background Image Composition Guide

Start with the two-surface problem

A Codex background is judged in two different layouts. The home view behaves like an ultrawide banner with large headings, cards, and open horizontal space. A task view is taller and denser: paragraphs, code, status text, navigation, and the bottom composer can occupy most of the visible frame. One image is cropped, scaled, and covered differently by those surfaces. Designing only against a home screenshot often produces a task background with a missing face, a horizon through the text, or a key object under the composer. Start with the shared constraints and treat visual drama as a secondary goal. The image should support sustained reading before it decorates an empty screen.

Test both a populated task and the home view.
Use the window sizes you actually work in.
Keep a master image outside the theme directory.
Change one composition variable per revision.

Use 20:9 as a useful working canvas

A 20:9 source gives enough horizontal room for the wide home treatment without forcing the subject into the reading column. It is a working recommendation from CodexSkin practice, not an official file requirement. Begin at least 2000 pixels wide when your source allows it, preserve the original aspect ratio during generation or layout, and export a high-quality copy for import. Do not stretch a 16:9 photo merely to reach the ratio; extend, recrop, or redesign it so shapes and faces remain natural. Before import, also create a temporary 16:9 preview. That second crop approximates the pressure a task layout can place on the top, sides, and focal subject.

Keep the original uncropped source.
Preview 20:9 and 16:9 before import.
Avoid upscaling a small noisy image.
Version exports instead of overwriting them.

Place the focal subject inside the right-side safe zone

For a portrait, place the face center around 70% to 82% of the canvas width and 35% to 50% of its height. Aim near 45% vertically as a balanced first attempt, keep the complete head visible, and limit total subject height to roughly 45% of the frame. These ranges leave headroom for cropping and move visual weight away from the left reading area. The same idea applies without a person: position a product, architectural form, planet, bright cloud, or abstract focal mass in the right third. Do not push it against the edge. Responsive crops can remove more than a static mockup suggests, so retain quiet padding on the subject’s outer side.

Face or focal center: 70%–82% across.
Vertical center: 35%–50%, often near 45%.
Subject height: no more than about 45%.
Preserve headroom and right-edge padding.

Reserve the left 55% for readable negative space

Negative space is not simply empty black pixels. It is an area with controlled brightness, limited texture, slow gradients, and no elements that look like letters or controls. Reserve approximately the left 55% of the source as a dark, low-detail reading field. Soft atmospheric color, broad shadows, or a restrained gradient can keep the image alive without fighting headings and task text. Avoid stars, foliage, hair, city windows, tiny particles, and synthetic pseudo-text in this area. They create local contrast that intersects letter shapes. If the background remains busy after blur, simplify the source or reduce the tonal range rather than expecting interface overlays to solve every conflict.

Prefer broad shapes over tiny texture.
Keep bright edges out of text columns.
Remove generated pseudo-text and symbols.
Check muted text, not only headings.

Treat the bottom composer region as unavailable

The task composer covers part of the lower image and visually dominates the bottom edge. Keep faces, hands, logos, horizon lines, captions, and the decisive part of a silhouette away from that region. Texture may continue behind it, but the composition should still make sense when the lower band is hidden. A useful test is to place a temporary rectangle over the bottom 18% to 24% of your preview. If the story or balance collapses, move the focal elements upward or reduce their scale. This rule also improves narrow windows, where the composer occupies a larger percentage of the available height and horizontal cropping can pull the subject closer to the input area.

Mask the bottom 18%–24% during preview.
Move meaningful elements upward.
Test the narrowest desktop window you use.
Do not bake UI chrome into the source.

Generate a source, then review rather than trusting the prompt

A practical generator prompt is: 20:9 ultrawide cinematic desktop wallpaper, a small subject in the right third, complete head and generous headroom, face center at 70% to 82% of canvas width and about 45% of canvas height, subject no taller than 45%, left 55% dark low-detail negative space, key subject inside the central vertical safe zone, important details away from the bottom composer, restrained texture, no text, logo, border, or interface. The prompt establishes intent but cannot guarantee anatomy, crop, licensing, or readability. Inspect the full-resolution result, remove accidental marks, confirm your right to use it, compare both crops, import a copy, and repeat the real interface check before keeping it.

Reject accidental text, marks, and UI shapes.
Confirm image rights before publishing.
Compare home and task after import.
Regenerate or edit when either surface fails.