Themeisle Docs

Appearance

How to fix cropped banner and hero background images in WordPress ​

If a banner or hero background image looks zoomed in, cropped, or badly positioned even though the file itself is large, this guide explains why it happens and how to fix it by choosing an image that matches the banner's shape and repositioning its focal point.

In this article

Why banner background images are cropped ​

A background image is stretched or scaled until it covers its entire section. When the image's proportions do not match the section's proportions, the image is enlarged until it fills the whole area, and the parts that overflow the edges are hidden. A wide, shallow banner can therefore show only a wide, shallow slice of a square or portrait photo.

Uploading a higher-resolution image does not solve this: resolution affects sharpness, not shape. Only the relationship between the image's proportions and the section's proportions decides how much of the picture stays visible. The same behavior is why background images can look different on mobile — see Why background images aren't responsive.

Choose an image that matches the banner shape ​

The aspect ratio of an image is the relationship between its width and its height. A 1920 × 600 pixel image is about three times wider than it is tall, which suits a shallow full-width banner. A 1920 × 800 pixel image is taller, which suits a more prominent hero section. These are examples, not required sizes — what matters is that the image's proportions are close to the proportions of the section it fills.

Different sections on the same site often need differently proportioned images: a thin strip above a shop page needs a much wider, shallower image than a tall homepage hero. When essential content sits near the edges of the photo, prefer an image whose subject is composed near the center, since the edges are the first areas to be cropped.

Adjust the image in the block editor ​

Before editing, make sure the image belongs to a block inside the page content rather than to a theme-generated page header. If the image appears on the page in the block editor, it is owned by a block — usually a Cover block or an Otter Section block — and you can adjust it as described below. If it only appears on the live site and not in the editor, it is set by your theme, and you should adjust it in the theme's own header or customizer options instead.

WordPress Cover block ​

  1. Open the page in the block editor and select the Cover block. If the block is nested inside other blocks, click the List View icon in the top toolbar and select the Cover block there.
  2. In the block settings sidebar, drag the focal point picker's marker over the part of the image that must stay visible. The preview updates as you drag.
  3. Click Update and check the page.

Otter Section block ​

  1. Open the page in the block editor and click the List View icon in the top toolbar.

  2. Select the parent Section — not a Section Column or an inner block. In imported or deeply nested layouts, expand the tree in List View until you find the Section that owns the background.

  3. In the right sidebar, open the Style tab and click Background & Content.

  4. Set Background Size to Cover, so the image keeps filling the whole section.

  5. Use the Focal point picker to drag the marker over the important part of the image. The section preview updates so you can see which area stays in view.

If you are still building the banner itself, see How to build a landing page in WordPress for creating a headline section with a background image.

Check the banner at different screen widths ​

After updating the page, open its public view and check the banner at desktop, tablet, and mobile widths — resize the browser window or use your browser's device preview. A focal point that works on a wide desktop banner can still cut off content on a narrow phone screen.

If essential content remains cropped at some width, use an image with proportions closer to that section's shape, or a differently composed photo whose subject sits nearer the center. No single image size fits every banner.

📝 Note: In the Hestia theme, the page header background comes from the page's featured image rather than from a block, and it is adjusted differently — see How to adjust header image position and fix cropping in Hestia.

Was this helpful?