Getting an AI Image to Work in a Website Hero

Generate a wide image, put a headline over it, then open the page on your phone.

The cup is cropped out. The empty space is gone. The headline now sits over the busiest part of the picture.

A 16:9 image gives you a starting shape. The layout determines how much of it anyone actually sees. That is worth figuring out before spending an afternoon rewriting prompts.

Give the image a job in the layout

Take a simple landing page: headline on the left, a ceramic coffee cup on the right, one button below the copy.

Before generating the image, put the actual headline and button into a rough layout. Use a solid rectangle for the image if necessary. You want to know where the text ends and where the cup can begin.

This matters more than it sounds. “Leave space on the left” could mean room for a short heading. Your page might need room for a three-line heading, a description, and two buttons.

For this example, the image brief could be:

• Cup in the right third of the frame.
• Left half reserved for text.
• Warm, low-detail background.
• No lettering or decorative objects behind the copy.
• Mobile layout places the copy above the image.

That last decision takes some pressure off the image. It only needs to support overlapping text on wider screens.

Put those constraints into the prompt

A scene prompt might look like this:

A ceramic coffee cup on a wooden desk, warm morning light, realistic photography.

There is nothing in that request about a website. A centered cup, a plant on the left, and a sharply defined window frame would all fit the description.

Here is a more useful brief for our layout:

Wide photograph for a website hero, 16:9. A cream ceramic coffee cup on a pale wooden desk, positioned in the right third. Warm morning light from the right. The left half shows a plain, softly lit beige wall with very little texture, reserved for a headline and button. Keep the cup fully inside the frame. No lettering, logos, plants, or extra desk objects.

The useful details are spatial: where the cup goes, what sits behind the text, and which objects would get in the way.

The model may ignore some of them. Treat the output as a draft.

When reviewing it, use the page mockup. If the cup overlaps the copy, ask for a position change. If a window frame cuts through the letters, remove the window frame. Keep revisions specific enough that you can tell whether they helped.

Changing the subject position, lighting, palette, and camera angle at once makes that harder.

Understand what cover will crop

Suppose the source image is 1600 × 900, and the mobile image box is 400 × 500.

With object-fit: cover, the image scales to roughly 889 × 500 to fill the box without distortion. The box shows about 45% of the image’s width.

That is a lot of composition to lose. The cup and the space beside it might simply be too far apart to survive together.

For an <img> element, object-position lets you adjust which area remains visible:

.hero__image {
  display: block;
  width: 100%;
  height: clamp(20rem, 40vw, 36rem);
  object-fit: cover;
  object-position: 75% center;
}

Here, 75% center favors the right-hand portion when there is horizontal cropping. It does not detect the cup or guarantee that the whole cup stays visible. MDN explains how object-fit and object-position interact.

For our example, the mobile design already puts the copy above the image. We can let the image keep its natural proportions there:

@media (max-width: 48rem) {
  .hero__image {
    height: auto;
  }
}

This snippet handles the image sizing; the surrounding component still needs to arrange the copy and image at that breakpoint.

If the mobile design requires a tall image, a separate composition may be a better fit. Decide that from the layout rather than repeatedly trying to generate a landscape image that tolerates every possible crop.

Check the background behind the actual letters

A quiet background helps, but it does not establish sufficient contrast by itself.

Pale beige can look restrained and still be a poor background for white text. A dark image can contain one reflection that makes a few words difficult to read.

Check the parts of the image directly behind the heading, description, and button label. Repeat after changing the crop.

For normal-size text, WCAG’s minimum contrast requirement is 4.5:1. The W3C explanation covers the criterion and its exceptions.

An overlay is one option. Putting the copy on a solid background is another. If the design needs several layers of fixes to make the heading readable, revisit the composition.

Keep the heading and button in HTML, too. Copy changes and translations are much easier when they do not require a new image.

Review the asset in the browser before calling it finished

Use the real headline. Resize slowly through the widths between your usual desktop and mobile previews. Check what happens when the heading wraps onto another line.

Then look at the image at its displayed size. A distorted cup handle may be obvious there, even if it was easy to miss in a thumbnail. Conversely, tiny background details may have no bearing on the finished page.

For accessibility, decide what the image contributes. A purely decorative <img> should use alt="". An image that communicates additional information needs an appropriate text alternative. W3C’s decorative image guidance explains that distinction.

Save the composition brief with the selected asset. When the headline gets longer or the layout changes, you will have something more useful to revise than “make it look better.”

For a hero section, the browser is where the image earns its place. Approve it there.